使用vue开发echarts圆环统计图组件--legend 多列展示 和 legend 分页展示
开发背景就不过多赘述了，直接先来几张效果图吧
1.首先在 package.json 中添加echarts：
{
"dependencies": {
"echarts": "^5.0.0",
}
}
2.然后执行 npm install；
3.接下来就开始编写相关组件文件，代码量较大，建议直接复制下来按步骤运行：
3.1.创建组件文件 pieLoopChart.vue 代码如下：
<template> <!-- 饼状 圆环 echarts --> <div :id="id" style="height: 100%; width: 100%"></div> </template> <script> //echarts 饼状图组件2 export default { props: { "id": { type: String, default: "pieLoopChart" }, "color": { type: String, default: "" }, "pieData": { type: Object, default: {} } }, data() { return { pieLoopChart: undefined, colors: [ '#FF6347','#F4A460','#FF8C00','#FFE4B5','#FFD700', '#FFFF00','#7CFC00','#32CD32','#00FF7F','#48D1CC', '#00FFFF','#00BFFF','#8A2BE2','#EE82EE','#FFC0CB' ], legendData: [], seriesData: [ { value: 7283, value1: 1, name: '公共租赁房' }, { value: 6283, value1: 1, name: '经济适用房' }, { value: 5820, value1: 1, name: '廉租房' }, { value: 2671, value1: 1, name: '定向安置房' }, { value: 7283, value1: 1, name: '两限商品房' }, { value: 271, value1: 1, name: '安居商品房' } , { value: 7283, value1: 1, name: '公共租赁房2' }, { value: 6283, value1: 1, name: '经济适用房2' }, { value: 5820, value1: 1, name: '廉租房2' }, { value: 2671, value1: 1, name: '定向安置房2' }, { value: 7283, value1: 1, name: '两限商品房2' }, { value: 271, value1: 1, name: '安居商品房2' } , { value: 7283, value1: 1, name: '公共租赁房3' }, { value: 6283, value1: 1, name: '经济适用房3' }, { value: 5820, value1: 1, name: '廉租房3' }, { value: 2671, value1: 1, name: '定向安置房3' }, { value: 7283, value1: 1, name: '两限商品房3' }, { value: 271, value1: 1, name: '安居商品房3' } , { value: 7283, value1: 1, name: '公共租赁房5' }, { value: 6283, value1: 1, name: '经济适用房5' }, { value: 5820, value1: 1, name: '廉租房5' }, { value: 2671, value1: 1, name: '定向安置房5' }, { value: 7283, value1: 1, name: '两限商品房5' }, { value: 271, value1: 1, name: '安居商品房5' } ] } }, methods: { initChart() { var echarts = require("echarts"); // 基于准备好的dom，初始化echarts实例 this.pieLoopChart = echarts.init(document.getElementById(this.id)); // 绘制图表 if (this.pieData.seriesData && this.pieData.seriesData.length > 0) { var tmpData = []; for (var j = 0, m = this.pieData.seriesData.length; j < m; j++) { if (this.pieData.seriesData[j].value && this.pieData.seriesData[j].name) { tmpData.push(this.pieData.seriesData[j]); } } if (tmpData.length > 0) { this.seriesData = tmpData; } } // 填充legendData 数据 for (var i = 0, n = this.seriesData.length; i < n; i++) { this.legendData.push(this.seriesData[i].name); // this.seriesData[i].value = this.seriesData[i].value1; } const seriesData = this.seriesData; this.pieLoopChart.setOption({ tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, grid: { top: '50%', left: 90 }, legend: [ { top: 0, // right: 10, left: '45%', orient: 'vertical', formatter: function(name) { var v; for (var i = 0, n = seriesData.length; i < n; i++) { if (name == seriesData[i].name) { v = seriesData[i].value; } } return `{name|${name}} {val|${v}}`; }, data: this.legendData.slice(0, 9), // 切割 legend.data 进行分列展示 第一列 textStyle: { color: '#fff', // fontSize: 12, // padding: [0, -5, 0, 0], // 修改文字和图标距离 rich: { name: { color: '#A9FDFF' }, val: { color: '#ffffff' } } }, },{ top: 0, left: '71%', bottom: 150, type: 'scroll', // legend.data 分页展示 orient: 'vertical', data: this.legendData.slice(9), // 切割 legend.data 进行分列展示 第二列 formatter: function(name) { var v; for (var i = 0, n = seriesData.length; i < n; i++) { if (name == seriesData[i].name) { v = seriesData[i].value; } } return `{name|${name}} {val|${v}}`; }, textStyle: { color: '#fff', rich: { name: { color: '#A9FDFF' }, val: { color: '#ffffff' } } } } ], series: [ { name: this.pieData.name, type: 'pie', radius: ['66%', '95%'], center: ['23%', '50%'], avoidLabelOverlap: false, label: { show: false, position: 'center', // normal: { // padding: [0, -16], // formatter: "{white|{b}}\n\n{blue|{c}}", // borderWidth: 10, // borderRadius: 10, // rich: { // //线上文字不同样式 // white: { // color: "#000", // }, // blue: { // color: "#2AD0FF", // fontWeight: 1000, // }, // }, // }, }, emphasis: { label: { show: true, fontSize: 12, color: '#ffffff', // fontWeight: 'bold', formatter: "{fs20|{b}}\n{c} ({d}%)", rich: { fs20: { fontSize: 20 } } } }, labelLine: { show: false, // smooth: 0.01, // length: 20, // length2: 10, }, data: this.seriesData } ] }); //自适应函数 this.updateRsize(this.pieLoopChart); }, genData(arr) { arr.forEach((item) => { item.label = { show: (function () { if (item.value == 0) { return false; } else { return true; } })(), }; item.labelLine = { show: (function () { if (item.value == 0) { return false; } else { return true; } })(), }; }); return arr; }, }, mounted() { // this.initChart(); }, watch: { //动态监听数据是否变化 pieData() { this.initChart(); }, }, }; </script> <style> </style>
其中 legend 多列展示 和 legend 分页展示 的关键代码如下：
legend: [ { top: 0, // right: 10, left: '45%', orient: 'vertical', formatter: function(name) { var v; for (var i = 0, n = seriesData.length; i < n; i++) { if (name == seriesData[i].name) { v = seriesData[i].value; } } return `{name|${name}} {val|${v}}`; }, data: this.legendData.slice(0, 9), // 切割 legend.data 进行分列展示 第一列 textStyle: { color: '#fff', // fontSize: 12, // padding: [0, -5, 0, 0], // 修改文字和图标距离 rich: { name: { color: '#A9FDFF' }, val: { color: '#ffffff' } } }, },{ top: 0, left: '71%', bottom: 150, type: 'scroll', // legend.data 分页展示 orient: 'vertical', data: this.legendData.slice(9), // 切割 legend.data 进行分列展示 第二列 formatter: function(name) { var v; for (var i = 0, n = seriesData.length; i < n; i++) { if (name == seriesData[i].name) { v = seriesData[i].value; } } return `{name|${name}} {val|${v}}`; }, textStyle: { color: '#fff', rich: { name: { color: '#A9FDFF' }, val: { color: '#ffffff' } } } } ],
3.2.创建文件 securityOverviewChart.vue 并引入刚创建的组件， 代码如下：
<template> <div class="cloud_wrap"> <border-tem-py :width="'100%'"> <!-- 插槽模板 --> <div class="title" slot="title">保障房概览</div> <div class="content-box" slot="content"> <div class="layui-row layui-col-space10"> <div class="layui-col-md12"> <pie-loop-chart-py :id="'securityPieChart'" :pieData="pieData" /> </div> </div> </div> </border-tem-py> </div> </template> <script> import pieLoopChartPy from '../../../../common/pieLoopChartPY.vue'; // 路径根据自己实际项目中的进行修改 export default { components: { pieLoopChartPy }, data() { return { active: 'y', content: '', pieData: {}, }; }, methods:{ btnClick(val) { this.active = val; this.loadData(); }, loadData() { let params = { type: this.active, year: this.year }; this.content = JSON.stringify(params) // alert(this.content); this.pieData = { name: '', seriesData: [ {name: '', value: 0}, {name: '', value: 0} ] }; } }, mounted() { this.loadData(); }, }; </script> <style scoped> * { font-family: MicrosoftYaHei; } .cloud_wrap{ z-index: 1; position: relative; cursor: pointer; } .cloud_wrap .btns-box .btn { padding: 2px 12px; } .cloud_wrap .layui-col-md12 { min-width: 175px; height: 230px; } </style>
3.3.然后再相关页面中再引入 securityOverviewChart.vue 并使用即可；
小贴士：
百度Echarts官网：https://echarts.apache.org/examples/zh/index.html
html中的调色与透明度：https://www.cnblogs.com/jindao3691/p/16093404.html
echarts柱状折线图综合vue组件：https://www.cnblogs.com/jindao3691/p/16093535.html
每天进步一点点，点滴记录，积少成多。
以此做个记录，
如有不足之处还望多多留言指教！
