vue+echarts实现饼图组件（实现左右联动并且数据量大时可滚动）

pieChart.vue(直接cv即可) 

<template><div class="rBox1"><div id="rBox1"></div></div>
</template><script>
export default {name: "pieChart",dicts: [],props: {subtext: {type: String,default: "",},chartData: {type: Array,default: () => [// {//   value: 1,//   legendName: "类型1",//   name: "类型1  335 件/10.5%",//   itemStyle: { color: "#8d7fec" },// },],},},computed: {sum() {return this.chartData.reduce((total, item) => {return total + item.value;}, 0);},},components: {},watch: {chartData() {this.initMyEChart();},},data() {return {myChart: "",option: {},};},methods: {initMyEChart() {this.option = {title: [{text: this.sum,subtext: this.subtext,textStyle: {fontSize: 30,color: "black",},subtextStyle: {fontSize: 14,color: "#333",},textAlign: "center",x: "29%",y: "37%",},],tooltip: {trigger: "item",formatter: function (parms) {var str =parms.marker +"" +parms.data.legendName +"</br>" +"数量：" +parms.data.value +"</br>" +"占比：" +parms.percent +"%";return str;},},legend: {type: "scroll",orient: "vertical",left: "64%",align: "left",top: "middle",textStyle: {color: "#8C8C8C",fontSize: 12,},height: 140,itemWidth: 10,itemHeight: 10,itemGap: 10,},series: [{name: "类型占比",type: "pie",center: ["30%", "50%"],radius: ["60%", "80%"],clockwise: false,avoidLabelOverlap: false,label: {normal: {show: true,position: "outter",formatter: function (parms) {return parms.data.legendName;},},},labelLine: {normal: {length: 5,length2: 3,smooth: true,},},data: this.chartData,},],};this.myChart = this.$echarts.init(document.getElementById("rBox1"));this.myChart.setOption(this.option);window.addEventListener("resize", () => {this.myChart.resize();});},},created() {},mounted() {},beforeDestroy() {this.myChart.clear();},
};
</script><style lang="scss" scoped>
.rBox1 {width: 100%;height: 100%;#rBox1 {width: 100%;height: 100%;}
}
</style>

使用

    <div class="leftComp-box-content"><pieChart ref="pieChart" :chartData="pieData" subtext="事件总量"/></div>
import pieChart from "@/views/pieChart.vue";components: {pieChart},data() {return {pieData: [],};},getBox2Data() {const data = [{"name": "拥堵事件","count": 12,},{"name": "道路事件","count": 56,},{"name": "超速事件","count": 105,},{"name": "交通事故","count": 71,},{"name": "气象","count": 10,},{"name": "道路施工","count": 45,},{"name": "道路维护","count": 23,},{"name": "道路瞎写","count": 51,},{"name": "道路维修","count": 30,}]const sum = data.reduce((total, item) => {return total + item.count;}, 0);this.pieData = data.map((i) => {return {value: i.count,legendName: i.name,name: `${i.name}   ${i.count}   件/${((i.count / sum) * 100).toFixed(2)}%`,};});},mounted() {this.initLeftCompData();},.leftComp-box-content {
width: 100px;
height: 100px;}