需求：页面展示几个关键单位信息，之后其他所有单位都放到其他里面汇总，鼠标划入其他显示所有单位的数据以及信息。
效果图： 即拿即用 直接CV代码即可出现如图效果
代码实现：
html
<template> <div class="rightTopCompont"> <div id="rightPieEchart"></div> </div> </template>
js
<script> import * as echarts from "echarts"; export default { data() { return { total: 0 }; }, mounted() { this.init(); }, methods: { init() { var data = [ { projectNum: "10", provinceName: "中国XXX单位", stageNumThree: "8", stageNumTwo: "2" }, { projectNum: "19", provinceName: "中国XXX单位1", stageNumThree: "10", stageNumTwo: "9" }, { projectNum: "5", provinceName: "中国XXX单位2", stageNumThree: "0", stageNumTwo: "5" }, { projectNum: "9", provinceName: "中国XXX单位3", stageNumThree: "9", stageNumTwo: "0" }, { projectNum: "5", provinceName: "中国XXX单位5", stageNumThree: "3", stageNumTwo: "2" }, { projectNum: "15", provinceName: "其他", stageNumThree: "7", stageNumTwo: "9", projectAccountVOS: [ { projectNum: "10", provinceName: "中国XXX单位中国XXX单位中国XXX单位中国XXX单位中国XXX单位", stageNumThree: "8", stageNumTwo: "2" }, { projectNum: "19", provinceName: "中国XXX单位1", stageNumThree: "10", stageNumTwo: "9" }, { projectNum: "5", provinceName: "中国XXX单位2", stageNumThree: "0", stageNumTwo: "5" }, { projectNum: "9", provinceName: "中国XXX单位3", stageNumThree: "9", stageNumTwo: "0" }, { projectNum: "5", provinceName: "中国XXX单位5", stageNumThree: "3", stageNumTwo: "2" }, { projectNum: "10", provinceName: "中国XXX单位", stageNumThree: "8", stageNumTwo: "2" }, { projectNum: "19", provinceName: "中国XXX单位1", stageNumThree: "10", stageNumTwo: "9" }, { projectNum: "5", provinceName: "中国XXX单位2", stageNumThree: "0", stageNumTwo: "5" }, { projectNum: "9", provinceName: "中国XXX单位3", stageNumThree: "9", stageNumTwo: "0" }, { projectNum: "5", provinceName: "中国XXX单位5", stageNumThree: "3", stageNumTwo: "2" }, { projectNum: "10", provinceName: "中国XXX单位", stageNumThree: "8", stageNumTwo: "2" }, { projectNum: "19", provinceName: "中国XXX单位1", stageNumThree: "10", stageNumTwo: "9" }, { projectNum: "5", provinceName: "中国XXX单位2", stageNumThree: "0", stageNumTwo: "5" }, { projectNum: "9", provinceName: "中国XXX单位3", stageNumThree: "9", stageNumTwo: "0" }, { projectNum: "5", provinceName: "中国XXX单位5", stageNumThree: "3", stageNumTwo: "2" } ] } ]; this.pieEcharts(data); }, pieEcharts(data) { var myChart = echarts.init(document.getElementById("rightPieEchart")); let title = "单位"; var color = [ { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#25E0C8" }, { offset: 1, color: "#16C5AF " } ]) }, { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#FAB280" }, { offset: 1, color: "#ECA06C " } ]) }, { // 颜色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#62BFFA" }, { offset: 1, color: "#47B0F3 " } ]) }, { // 颜色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#8BEFAB" }, { offset: 1, color: "#6ADD8F " } ]) }, { // 颜色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#008D81" }, { offset: 1, color: "#008D91 " } ]) }, { // 颜色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#6ADDF2" }, { offset: 1, color: "#6ADDF9 " } ]) }, { // 颜色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#EB905C" }, { offset: 1, color: "#EB907C " } ]) } ]; let echartData = []; var formatNumber = null; if (data.length > 0) { data.forEach((item, index) => { echartData.push({ name: item.provinceName, value: item.projectNum, data: { supervisor: item.stageNumTwo, construction: item.stageNumThree }, itemStyle: { // 颜色渐变 normal: color[index] }, projectAccountVOS: [ { name: item.provinceName, value: item.projectNum, data: { supervisor: item.stageNumTwo, construction: item.stageNumThree }, itemStyle: { // 颜色渐变 normal: color[index] } } ] }); if (item.projectAccountVOS) { if (item.provinceName == "其他") { echartData[index].projectAccountVOS = []; } item.projectAccountVOS.forEach(it => { echartData[index].projectAccountVOS.push({ name: it.provinceName, value: it.projectNum, data: { supervisor: it.stageNumTwo, construction: it.stageNumThree } }); }); } }); formatNumber = num => num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); this.total = echartData.reduce((a, b) => a + +b.value, 0); } var option; // 指定图表的配置项和数据 if (data.length == 0) { //暂无数据 option = { title: { text: "暂无数据", x: "center", y: "center", textStyle: { fontSize: 14, color: "#ccc", fontWeight: "normal" } } }; } else { option = { title: [ { text: "{val|" + formatNumber(this.total) + "}{unit|个" + "}\n {name|" + title + "}", textAlign: "center", top: "center", x: "24%", textStyle: { rich: { name: { fontSize: this.$fontChart(0.14), fontWeight: "400", color: "#000000", fontFamily: "PingFangSC-Regular, PingFang SC" }, unit: { fontSize: this.$fontChart(0.12), fontWeight: "400", color: "#666666", fontFamily: "Source Han Sans CN-Regular, Source Han Sans CN" }, val: { fontSize: this.$fontChart(0.3), fontFamily: "DIN Alternate-Bold, DIN Alternate", fontWeight: "bold", color: "#000000" } } } } ], tooltip: { trigger: "item", confine: true, backgroundColor: "rgba(0,0,0,0)", // 提示框浮层的背景颜色。 position: function(point, params, dom, rect, size) { var x = 0; // x坐标位置 var y = 0; // y坐标位置 // 当前鼠标位置 var pointX = point[0]; var pointY = point[1]; // 提示框大小 var boxWidth = size.contentSize[0]; var boxHeight = size.contentSize[1]; // boxWidth > pointX 说明鼠标左边放不下提示框 if (boxWidth > pointX) { x = pointX + 10; } else { // 左边放的下 x = pointX - boxWidth - 10; } // boxHeight > pointY 说明鼠标上边放不下提示框 if (boxHeight > pointY) { y = 5; } else { // 上边放得下 y = pointY - boxHeight; } if (params.name == "其他") { return [30, point[1]]; } else { return [x, y]; } }, formatter: params => { var res = ""; res += ` <div class="Box" style=" background: #fff; width: 150px; height: auto; max-height: 500px; box-shadow: 0px 0px 6px 1px rgba(106, 106, 106, 0.16); border-radius: 5px 5px 5px 5px; padding: 0 20px; overflow-y:auto; overflow-x:hidden " > ${params.data.projectAccountVOS.map(item => { var totalData = item.data.supervisor == 0 || item.data.construction == 0 ? 146 : 130; var oneWidthData = ( (Number(item.data.supervisor) / Number(item.value)) * totalData ).toFixed(2); var twoWidthData = ( (Number(item.data.construction) / Number(item.value)) * totalData ).toFixed(2); return ` <div style=" padding-top: 5px; font-size: 16px; font-family: 'Source Han Sans CN-Medium, Source Han Sans CN'; font-weight: 500; color: #333333; word-wrap: break-word; width:100%; height:auto; word-break: break-all; overflow: hidden; " > ${String(item.name).replace(/(.{9})/g, "$1<br/>")} </div> <div style=" display: flex; align-items: center; justify-content: space-between; margin-top: 12px; " > <div style=" display: flex; align-items: center; justify-content: space-between; " > <img style="width: 20px; height: 20px; margin-right: 9px" src="${require("../assets/images/engineerProject/unitNumber.png")}" /> <div style=" font-size: 14px; font-family: 'Source Han Sans CN-Regular, Source Han Sans CN'; font-weight: 400; color: #333333; " > 单位总数 </div> </div> <div style=" font-size: 16px; font-family: 'Source Han Sans CN-Medium, Source Han Sans CN'; font-weight: 500; color: #333333; " > ${item.value} </div> </div> <div style="display: flex; height: 8px; margin-top: 10px; width: 146px"> <div style="height: 8px; background: #16c5af; width: ${oneWidthData}px"></div> <div style="display: ${ item.data.supervisor == 0 || item.data.construction == 0 ? "none" : "flex" };"> <div style=" height: 0; background: #fff; width: 0; border-color: #16c5af transparent; border-width: 0px 8px 8px 0px; border-style: solid; " ></div> <div style=" height: 0px; background: #fff; width: 0px; border-color: rgba(22, 197, 175, 0.5) transparent; border-width: 8px 0px 0px 8px; border-style: solid; " ></div> </div> <div style=" height: 8px; background: rgba(22, 197, 175, 0.5); width: ${twoWidthData}px " ></div> </div> <div style="display: flex; align-items: center"> <div> <div style="display: flex; align-items: center; margin-top: 5px"> <div style=" width: 6px; height: 6px; background: #16c5af; margin-right: 5px; " ></div> <div style="color: #333; font-size: 12px">JL单位</div> </div> <div style=" color: #333; font-size: 14px; font-weight: 500; margin-top: 5px; margin-left: 11px; " > ${item.data.supervisor} </div> </div> <div style="margin-left: 25px"> <div style="display: flex; align-items: center; margin-top: 5px"> <div style=" width: 6px; height: 6px; background: #16c5af; margin-right: 5px; " ></div> <div style="color: #333; font-size: 12px">SG单位</div> </div> <div style=" color: #333; font-size: 14px; font-weight: 500; margin-top: 5px; margin-left: 11px; " > ${item.data.construction} </div> </div> </div> `; })} </div> `; return res; } }, legend: { // orient: "horizontal", x: "45%", y: "center", // legend 添加滚动请用以下代码 orient: "vertical", //垂直方向滚 type: "scroll", pageIcons: { vertical: [ "path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0 22.08-22.08 22.016-57.792 0-79.872L551.936 272.448C529.856 250.432 494.144 250.432 472.064 272.448z", "path://M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z" ] }, pageButtonPosition: "end", // 翻页的位置。'start'：控制块在左或上,end控制块在右或下。 pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色 pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色 pageIconSize: 14, //这当然就是按钮的大小 itemWidth: this.$fontChart(0.1), itemHeight: this.$fontChart(0.1), align: "left", textStyle: { rich: { nameStyle: { fontSize: this.$fontChart(0.14), width: this.$fontChart(0.9), color: "#333", fontWeight: 400 }, rate: { width: this.$fontChart(0.3), fontSize: this.$fontChart(0.14), color: "#333", fontWeight: 400 }, supervisor: { width: this.$fontChart(0.6), fontSize: this.$fontChart(0.14), color: "#666", fontWeight: 400 }, construction: { width: this.$fontChart(0.6), fontSize: this.$fontChart(0.14), color: "#666", fontWeight: 400 } } }, formatter: function(name) { let res = echartData.filter(v => v.name === name); res = res[0] || {}; var str = ""; var strData = res.name; if (strData) { strData = strData.length > 4 ? strData.substring(0, 4) + "..." : strData; } else { strData = "无"; } str = "{nameStyle|" + strData + " }" + "{rate|" + res.value + " }" + "{supervisor|" + "(JL:" + res.data.supervisor + "}" + "{construction|" + "SG:" + res.data.construction + ")}"; return str; } }, series: [ { type: "pie", radius: ["55%", "75%"], center: ["25%", "50%"], data: echartData, name: "工单总数", hoverAnimation: true, itemStyle: { normal: { borderColor: "#fff", borderWidth: 3 } }, labelLine: { show: false }, label: { show: false } } ] }; } myChart.setOption(option); myChart.on("legendselectchanged", params => { var echartsArr = []; //将点击后的数组设为空（每点击一次就重新判断添加） // 循环点击图例后获取到的名字 for (let key in params.selected) { // 判断值是否为true 将值为true的名字push到echartsArr数组当中保留起来 if (params.selected[key]) { echartsArr.push(key); } } var echartsNum = 0; //将总数的值设为0（每点击一次就重新计算） // 循环判断数据的全部数据里的name值是否与我们点击图例后所剩数据的数组相等 // 相等的话就将其value值进行相加得出点击图例后所剩数据的总数 option.series[0].data.forEach(item => { echartsArr.forEach(v => { if (item.name === v) { echartsNum += Number(item.value); } }); }); this.total = echartsNum; //最后将其赋值给主标题即可 myChart.setOption({ title: [ { text: "{val|" + formatNumber(this.total) + "}{unit|个" + "}\n {name|" + title + "}", textAlign: "center", top: "center", x: "24%", textStyle: { rich: { name: { fontSize: this.$fontChart(0.14), fontWeight: "400", color: "#000000", fontFamily: "PingFangSC-Regular, PingFang SC" }, unit: { fontSize: this.$fontChart(0.12), fontWeight: "400", color: "#666666", fontFamily: "Source Han Sans CN-Regular, Source Han Sans CN" }, val: { fontSize: this.$fontChart(0.3), fontFamily: "DIN Alternate-Bold, DIN Alternate", fontWeight: "bold", color: "#000000" } } } } ] }); }); myChart.resize(); window.addEventListener("resize", function() { myChart.resize(); }); } } }; </script>
css
<style lang="scss" scoped> .rightTopCompont { height: 800px; padding-top: 100px; overflow: hidden; margin-left: calc(100vw * 20 / 1920); #rightPieEchart { width: calc(100vw * 500 / 1920); height: calc(100vh * 220 / 930); } } </style>
