在用echarts做图时,label样式默认。在这里记录怎么修改label样式

echart1() {
      let Mychart1 = echarts.init(document.getElementById("chart1"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
          top: 80,
          icon: "triangle",
          //   bottom: "bottom",
        },
        series: [
          {
            name: "厂商分布",
            type: "pie",
            //设置圆环
            radius: ["10%", "50%"],
            left: "left",
            label: {
              lineHeight: 16,
            },
            data: [
              {
                value: 1048,
                name: "武汉生物",
                itemStyle: {
                  color: "#ffbb00",
                },
                label: {
                //{d}显示百分比。{a|}富文本样式标签。{b}数据
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#ffbb00",
                    },
                  },
                },
              },
              {
                value: 735,
                name: "兰州生物",
                itemStyle: {
                  color: "#087bae",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#087bae",
                    },
                  },
                },
              },
              {
                value: 580,
                name: "北京生物",
                itemStyle: {
                  color: "#17b3e9",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#17b3e9",
                    },
                  },
                },
              },
              {
                value: 484,
                name: "成都生物",
                itemStyle: {
                  color: "#2dbcbe",
                },
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#2dbcbe",
                    },
                  },
                },
              },
              {
                value: 300,
                name: "西安生物",
                itemStyle: {
                  color: "#2693ff",
                },
                //设置对应label的颜色
                label: {
                  formatter: "{b}\n{a|{d}%}",
                  rich: {
                    a: {
                      color: "#2693ff",
                    },
                  },
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      Mychart1.setOption(option);
    },

完成图:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐