如何在vue项目实现图表---vue-schart(饼状图)
1安装vue-schart插件npm i vue-schart -s1该信息未经许可获取自百度经验2检查是否安装成功查看配置文件package.json文件是否有vue-schart版本信息3启动项目npm run dev4在chart.vue中引入vue-schartimport schart from 'vue-schart';5模拟饼状图数据信息export default { data() { return { canvasid: 'mychart', type: 'pie', width: 600, height: 500, data: [ {name: '期刊', value: 1234}, {name: '图书', value: 2345}, {name: '小说', value: 2456}, {name: '文学', value: 333}, ], options: { title: 'example vue-schart', bgcolor: '#829dca', titlecolor: '#ffffff', legendcolor: '#ffffff' } } }, components:{ schart }}6组件: <schart :canvasid="canvasid" :type="type" :width="width" :height="height" :data="data" :options="options" ></schart>7查看效果8注:下面是vue-schart的options几个属性的表达意思 padding: 44, // canvas 内边距 bgcolor: '#fff', // 默认背景颜色 title: 'example vue-schart',// 图表标题 titlecolor: '#000', // 图表标题颜色 titleposition: 'top' // 图表标题位置: top / bottom yequal: 5, // y轴分成5等分 fillcolor: '#1e9fff', // 默认填充颜色 contentcolor: '#eee', // 内容横线颜色 ax**color: '#666', // 坐标轴颜色end 20210311