1.Echarts安装
终端运行安装命令：
npm install echarts -s
在main.js做全局引用：
//引入echarts
import * as echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;
2.页面使用Echarts画柱状图和饼图
效果：
代码展示：
<!-- 统计信息展示 --><div style="display: flex; justify-content: space-around;margin-top: 36px;"><!-- 工作量统计 --><div class="echart-work" ref="echartWork"></div><!-- 库存统计 --><div class="echart-work" ref="echartRepertory"></div></div>mounted() {// 挂载完成dom后进行初始化this.showEcarts();},methods: {showEcarts() {//工作量统计const echartWork = this.$refs.echartWorkconst mycartEchartWork = this.$echarts.init(echartWork)//库存统计const echartRepertory = this.$refs.echartRepertoryconst mycartEchartRepertory = this.$echarts.init(echartRepertory)//绘制工作量统计图表const optionEchartWork = {title : {text: '工作量统计',subtext: '总计',left: '2%',top: '2%',},tooltip : {trigger: 'axis'},legend: {data:['']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,grid: [{top: 60,width: '90%',bottom: '10%',left: 10,containLabel: true},],xAxis : [{type : 'value',boundaryGap : [0, 0.01]}],yAxis : [{type : 'category',data : ['管理员','若依','Njcdv','曹日新','了不起的菜包','测试']}],series : [{name:'工作量',type:'bar',itemStyle: {color: 'rgb(30,144,255)'},data:[85, 0, 0, 143, 0, 20]},]};//绘制库存统计图表const optionEchartRepertory = {title : {text: '库存统计',subtext: '总计114',x:'center',top: '2%',},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient : 'vertical',x : 'left',data:['打点下载','素材','专题','其他','文档','音频']},toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ['pie', 'funnel',],option: {funnel: {x: '25%',width: '50%',funnelAlign: 'left',max: 1548}}},// restore : {show: true},saveAsImage : {show: true}}},// calculable : true,series : [{name:'库存统计',type:'pie',radius : '55%',center: ['50%', '60%'],itemStyle: {normal: {color: function (colors) {var colorList = ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'];return colorList[colors.dataIndex];}}},data:[{value:335, name:'打点下载'},{value:310, name:'素材'},{value:234, name:'专题'},{value:1548, name:'其他'},{value:135, name:'文档'},{value:548, name:'音频'},]}]};// 渲染图表mycartEchartWork.setOption(optionEchartWork)mycartEchartRepertory.setOption(optionEchartRepertory)}
