Echarts 饼图 图例过多采用分页+饼图引导线

效果图

代码部分

 initChart() {
      var myChart = this.$echarts.init(document.getElementById('title'));
      var echartData = [
        {
          name: '第1阶段',
          value: 95,
        },
        {
          name: '第2阶段',
          value: 120,
        },
        {
          name: '第3阶段',
          value: 98,
        },
        {
          name: '第4阶段',
          value: 90,
        },
        {
          name: '第5阶段',
          value: 100,
        },
        {
          name: '第6阶段',
          value: 97,
        },
        {
          name: '第7阶段',
          value: 100,
        },
        {
          name: '第8阶段',
          value: 100,
        },
        {
          name: '第9阶段',
          value: 100,
        },
        {
          name: '第10阶段',
          value: 100,
        },
        {
          name: '第11阶段',
          value: 100,
        },
        {
          name: '第12阶段',
          value: 80,
        },
      ]
      let option = {
        // 标题组件，包含主标题和副标题。
        title: [
          {
            text: '测试项目测试项目测试项目测试项目',
            top: '42%',
            left: '53%',
            textStyle: {
              color: '#303133',
              fontSize: 10,
              fontWeight: 'bold',
              textAlign: 'center',
              width: 100,
              overflow: 'truncate' // 超出width宽度时，truncate为以省略号填充
            },
          },
          {
            text: '总时长：2222',
            top: '52%',
            left: '55%',
            textStyle: {
              color: '#606166',
              fontSize: 10,
              fontWeight: '400',
              textAlign: 'center',
              width: 100,
              overflow: 'truncate' // 超出width宽度时，truncate为以省略号填充
            },
          }
        ],
        // 图例组件
        legend: {
          type: 'scroll',
          pageIconColor: '#303313',
          pageIconInactiveColor: '#909199',
          pageTextStyle: {
            color: '#303133',
            fontSize: 12,
          },
          pageIconSize: 12,
          orient: 'vertical',
          left: '0',
          top: '5',
          width: 80,
          formatter: (name) => {
            return (name.length > 10 ? (name.slice(0, 10) + "...") : name);
          },
        },
        // 提示框组件
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          bottom: "35px",
          right: "10px",
          left: "200px",
          top: "50px",
          containLabel: true,
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['60%', '50%'],
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              // alignTo: 'edge',
              formatter: '{time|时长：{c}  {d}%}\n{name|{b}}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#606166'
                },
                name:{
                  fontSize: 10,
                  color: '#606166',
                }
              }
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            labelLine: {//标签的视觉引导线配置
              normal: {
                length: 15,
                length2: 0,
                maxSurfaceAngle: 80
              }
            },
            data: echartData
          }
        ],
      };
      myChart.setOption(option,true)
    },