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;
      }