echarts动态改变legend中的颜色

神探小白牙

于 2024-08-14 09:45:17 发布

阅读量186

点赞数 1

分类专栏： echarts 文章标签： echarts javascript java

本文链接：https://blog.csdn.net/anny_mei/article/details/141182215

版权

echarts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果如图
在这里插入图片描述

  getChart1(bgColor, title, color, echartData, data) {
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);

      let option = {
        color: color,
        tooltip: {
          trigger: "item",
        },

        legend: {
          orient: "vertical",
          icon: "circle",
          itemWidth: 8, // 图例项宽度
          left: "57%",
          itemGap: 18, // 调整图例项之间的间距
          align: "left",
          top: "middle",
          symbolKeepAspect: false,
          textStyle: {
            color: "#333",
            align: "left",
            fontSize: 12,
            rich: {
              a: {
                verticalAlign: "right",
                align: "left",
                width: 85,
                fontSize: 14,
              },
            },
          },
          formatter: (name) => {
            let total = 0;
            let itemRatio = 0;
            let className = "";
            let target;
            for (let i = 0, l = echartData.length; i < l; i++) {
              itemRatio = echartData[i].itemRatio;
              total += Number(echartData[i].value);
              if (echartData[i].name == name) {
                target = echartData[i].value;
              }
              className = `color${i}`;
            }
            let str =
              "{a|" +
              name +
              "}{" +
              className +
              "| " +
              target +
              "/" +
              itemRatio +
              "%}";
            return str;
          },
        },
        title: [
          {
            text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
            top: "center",
            left: total > 100 ? "13%" : "20%",
            textStyle: {
              rich: {
                name: {
                  fontSize: 18,
                  fontWeight: "normal",
                  color: "#686f78",
                  padding: total > 100 ? [8, 35] : [8, 0],
                },
                val: {
                  fontSize: 28,
                  fontWeight: "bold",
                  color: "#333333",
                },
              },
            },
          },
        ],

        series: [
          {
            type: "pie",
            radius: ["61%", "76%"],
            center: ["24%", "50%"],
            data: echartData,
            hoverAnimation: false,
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  color: "#e6e6e6",
                },
              },
            },
            label: {
              show: false,
            },
            tooltip: {
              valueFormatter: function (value) {
                for (let i = 0, l = echartData.length; i < l; i++) {
                  return value + echartData[i].itemUnit;
                }
              },
            },
          },
        ],
      };
      //使用rich，来动态展示legend.title 以不同的颜色描边
      for (let i = 0; i < echartData.length; i++) {
        let key = `color${i}`;

        option.legend.textStyle.rich[key] = {
          color: echartData[i].itemColor,
          align: "left",
          fontSize: 12,
        };
      }

      this.charOption = option;
      window.addEventListener("resize", this.listenResize);
    },