阅读量:2
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.echartWork const mycartEchartWork = this.$echarts.init(echartWork) //库存统计 const echartRepertory = this.$refs.echartRepertory const 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) } 