echarts formatter_在Vue项目中使用Echarts，统计分析

最新推荐文章于 2022-12-08 00:10:50 发布

weixin_39548740

最新推荐文章于 2022-12-08 00:10:50 发布

阅读量432

点赞数

本文介绍如何在Vue项目中集成ECharts库，通过npm安装ECharts后，将其导入并设置为Vue的原型属性。接着展示了如何定义三个不同类型的饼状图（设备管理、客户端管理和课程管理），每个图表包含不同的数据集和样式配置，如颜色、提示信息和图例。最后，演示了如何根据后台数据动态设置图表选项并调整大小。

摘要由CSDN通过智能技术生成

首先，引入echart,我写的是饼状图

执行命令行 npm install echarts --save

然后，在min.js中引入echarts,设置全局变量

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

下面，开始使用echarts写vue项目

data () {return {loading: false,loading1:false,detailsUrl:'',Id:'',startTime:'',endTime:'',type:'',dialogVisible:false,deviceData:{title:'设备管理',startTime:'',endTime:'',graphic:{type: 'text',z: 100,left: 'center',top: 'middle',style: {text: '次数',fill:'#fff',font: '14px Microsoft YaHei',fontWeight:'bold'
}
},tooltip:{trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)",
},legend: {type: 'scroll',orient: 'horizontal',padding:20,right:3,bottom: 10,data: ['小程序','PC端']
},series:[{name: '次数',type: 'pie',radius : '45%',data: [
{name: '小程序', value:60},
{name: 'PC端', value: 40},
],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'
},normal:{
color:function(params) {var colorList = ['#27c6de', '#d62121',
];return colorList[params.dataIndex]
}
}
}
}]
},clientData:{title:'客户端管理',startTime:'',endTime:'',startTime:'',endTime:'',graphic:{type: 'text',z: 100,left: 'center',top: 'middle',style: {text: '次数',fill: '#fff',font: '14px Microsoft YaHei',fontWeight: 'bold'
}
},tooltip:{trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)",
},legend: {type: 'scroll',orient: 'horizontal',padding:20,right:3,bottom: 10,data: ['云课堂','智慧财税','资源平台']
},series:[{name: '次数',type: 'pie',radius : '45%',data: [
{name: '云课堂', value:60},
{name: '智慧财税', value: 20},
{name: '资源平台', value: 20},
],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'
},normal:{
color:function(params) {var colorList = ['#d62121','#579470','#27c6de'
];return colorList[params.dataIndex]
}
}
}
}]
},classData:{title:'课程管理',startTime:'',endTime:'',graphic:{type: 'text',z: 100,left: 'center',top: 'middle',style: {text: '次数',fill: '#fff',font: '14px Microsoft YaHei',fontWeight: 'bold'
}
},tooltip:{trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)",
},legend: {type: 'scroll',orient: 'horizontal',padding:20,right: 3,bottom: 10,data: ['课程一','课程二']
},series:[{name: '次数',type: 'pie',radius : '45%',data: [
{name: '课程一', value:60},
{name: '课程二', value: 40},
],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
},deviceTableData:[],//设备表格数据clientTableData:[],//客户端数据classTableData:[],//课程数据detailsData:[],//查看详情数据pages:{pageSize: 10,currentPage: 1,totalCount: 0,pageCount: 1
}
}
}

let myChart = _this.$echarts.init(document.getElementById('deviceChart'));

根据后台返回的数据对data进行组装
myChart.setOption({title: { text:data.title},tooltip: data.tooltip,legend:data.legend,series: data.series,graphic:data.graphic
});
myChart.resize();