Echarts图例翻页

Echarts 环形图图例翻页展示

当Echarts图例过多，翻页展示

显示翻页，需要 在legend 加上 type:‘scroll’ 属性。图例多到超出的时候，就会自动出现翻页

// 图例的data数据
 nodeParams: [
        "OperationalNodes",
        "OperationalActivity",
        "StartingPoint",
        "EndPoint",
        "State",
        "CommunicationNodes",
        "FightConcept",
        "Capability",
        "System",
        "SystemFunction",
      ]

option配置中修改图例legend设置

        legend: {
          orient: "vertical",
          left: "65%", //图例距离左的距离
          y: "center", //图例上下居中
          type: "scroll", /* 图例自动翻页 */
          textStyle: {
            padding: [0, 10, 0, 10],
            fontSize: 12,
            color: "#40C5F1",
          },
        },

我这里是环形图，这是原本没有设置 type：“scroll”的显示样式

加上设置之后，可以翻页看到所有的图例：

我这里是环形图，完整代码参考：

 let option = {
        tooltip: {
          trigger: "item",
          show: true,
        },
        legend: {
          orient: "vertical",
          left: "65%",
          y: "center",
          type: "scroll",
          pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
          pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
          textStyle: {
            padding: [0, 10, 0, 10],
            fontSize: 12,
            color: "#40C5F1",
          },
        },
        graphic: [
          {
            type: "text", //控制内容为文本文字
            left: "center",
            top: "40%", //调整距离盒子高处的位置
            left: "30%",
            style: {
              fill: "#F3DF04", //控制字体颜色
              text: "评估数量", //控制第一行字显示内容
              fontSize: "20px",
            },
          },
          {
            type: "text",
            left: "center",
            top: "53%",
            left: "33%",
            z: 10,
            style: {
              text: "2680",
              font: "Microsoft YaHei",
              fontSize: "24px",
              lineHeight: 15,
              fill: "#FFFFFF",
            },
          },
        ],
        series: [
          {
            name: ' ',
            type: "pie",
            radius: ["70%", "85%"], // 环图的大小
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 2,
            },
            label: {
              show: false,
              position: "left",
              itemStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            center: ["40%", "50%"], //控制圆位置
            avoidLabelOverlap: false,
            legendHoverLink: false,
            // silent: false, //取消了silent
            emphasis: {
              //使用emphasis
              // disabled: false,
              scale: false, //不缩放
              scaleSize: 0, //为了防止失效直接设置未0
            },
            data: [ ], // data数据在下面
          },
        ],
      };

      let apiData = [];
      // viewData 是我的视图数据，这里 key 是图例的名称，value 是值
      for (const key in this.viewData) {
        apiData.push({
          name: key,
          value: this.viewData[key],
        });
      }
      option.series[0].data = apiData;
      window.addEventListener("resize", () => {
        myChart.resize({ animation: { duration: 1000 } });
      });
      myChart.setOption(option);