echarts label 设置不同颜色

最新推荐文章于 2025-05-12 19:31:20 发布

原创最新推荐文章于 2025-05-12 19:31:20 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

该代码段展示了一个利用Echarts库创建的复杂图表，包括环形图和柱状图。它使用了线性颜色渐变来美化图表，显示了四个不同的数据类别（省指令、市门口、信访、公安）及其对应的数值。每个类别用不同颜色表示，且通过柱状图显示其相对比例。图表具有自定义的标签格式和防止标签重叠的设置，适合用于数据可视化和分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    drawWhereToAppeal() {
      let myChart = echarts.init(
        document.getElementById("QuantitativeAnalysis")
      );
      var color = [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#0B2733", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#27EAC1", // 100% 处的颜色
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#430926", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#EF2B67", // 100% 处的颜色
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#FFB12A", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#5F400F", // 100% 处的颜色
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#1D7EA6", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#27E3FF", // 100% 处的颜色
            },
          ],
        },
      ];
      var getflname = ["省指令", "市门口", "信访", "公安"];
      var getflvalue = [50, 100, 70, 30];
      // 圆环颜色

      // 圆环值
      var data1 = [];
      for (var i = 0; i < getflname.length; i++) {
        data1.push({
          name: getflname[i],
          value: getflvalue[i],
        });
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",

          radius: ["75%", "80%"],
          center: ["50%", "50%"],
          hoverAnimation: false,
          color: "transparent",
          minAngle: 2, // 最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
          label: {
            show: true,
            position: "outside",
            padding: [0, 5, 0, 0],
            fontSize: 13,
            // formatter: "{name|{b}}\n{value|{c}}{a|起}",
            formatter: function (params, index) {
              return (
                `{b|▍}{name|` +
                params.name +
                `}\n` +
                `{value|` +
                params.value +
                `}{a|起}`
              );
            },
            rich: {
              a: {
                color: "#ffffff",
                padding: [10, -5, 6, 15],
              },
              b: {
                padding: [0, 2, 6, -10],
                borderRadius: 2,
              },
              name: {
                color: "#ffffff",
                fontSize: 14,
                padding: [0, -20, 6, -1],
                align: "left",
              },
              value: {
                fontSize: 20,
                fontFamily: "Microsoft YaHei",
                fontWeight: "bold",
                padding: [5, -15, 3, -7],
                align: "left",
              },
            },
          },
          labelLine: {
            length: 20,
            length2: 25,
            show: true,
          },
          itemStyle: {
            normal: {
              //label指示线的颜色
              color: (params) => {
                var index = params.dataIndex;
                return this.colorList[index];
              },
            },
          },
          data: data1.map((item, index) => {
            item.label = {
              // label的颜色
              color: this.colorList[index],
            };
            return item;
          }),
        },
      ];
      var sum = 0;
      for (let i in data1) {
        sum += data1[i].value;
      }
      var num = 0;
      const seriesOption2 = data1.map((item, index) => {
        num += (item.value / sum) * 100;

        const a = {
          type: "bar",
          data: [, , , num],
          coordinateSystem: "polar",
          z: 9999 - index,
          name: "",
          roundCap: true,
          color: color[index],
          barGap: "-100%",
          itemStyle: {
            normal: {
              // borderWidth: 6,
              // color: "transparent",
              // borderColor: "#27EAC1",
              shadowBlur: 0,
              shadowColor: color[index],
            },
          },
        };
        return a;
      });

      let option = {
        color: color,
        tooltip: {
          show: false,
          extraCssText: "z-index:3",
        },
        title: [
          {
            text: "`{name|数量}`\n`{name|分析}`",
            top: "center",
            left: "center",
            textStyle: {
              rich: {
                name: {
                  fontSize: 16,
                  fontFamily: "Microsoft YaHei",
                  fontWeight: 400,
                  color: "#DFEEF3",
                  lineHeight: 23,
                },
              },
            },
          },
          // {
          //   text: "单位：个",
          //   top: 20,
          //   left: 20,
          //   textStyle: {
          //     fontSize: 14,
          //     color: "#666666",
          //     fontWeight: 400,
          //   },
          // },
        ],
        legend: {
          show: false,
        },
        angleAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          min: 0,
          max: 100,
          boundaryGap: ["0", "100"],
          startAngle: 90,
        },
        radiusAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: ["a", "b", "c", "d"],
          z: 10,
        },
        polar: {
          radius: "90%",
        },
        toolbox: {
          show: false,
        },
        series: [...seriesOption, ...seriesOption2],
      };
      myChart.setOption(option,true);
    },