echarts图例字体块文字颜色

echarts图例字体块文字颜色_第1张图片

如图图例字体颜色更改、标题换行、图例形状更改等

var option = {
        color: ["#60C8FF", "#fd1c54", "#E5DD00"],
        legend: {
          bottom: 0,
          left: "center",
          data: ["60kw直流", "7kw交流", "120kw交流"],
          textStyle: { color: "#FFFDFE" },
          icon: "circle"//图例形状设置
        },
        graphic: [//饼图中间数字和文字显示
          {
            type: "text",
            left: "center",
            top: "120px",
            z: 2,
            zlevel: 100,
            style: {
              text: "当前在线充电桩数",
              fill: "#FFFFFD",
              font: "bold 14px Microsoft YaHei"
            }
          },
          {
            type: "text",
            left: "center",
            bottom: "100px",
            z: 2,
            zlevel: 100,
            style: {
              text: "50",
              fill: "#5ec9ff",
              font: "bold 26px Microsoft YaHei"
            }
          }
        ],
        series: [
          {
            name: "分类",
            type: "pie",
            radius: ["50%", "70%"],
            labelLine: {
              normal: {
                //length: 35,     //折线
                //length2: 50    //文字下面的线
              }
            },
            data: [
              { value: 45, name: "60kw直流" },
              { value: 30, name: "7kw交流" },
              { value: 25, name: "120kw交流" }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b}  \n {d}%"//标题换行,按照自己的格式进行配置
                },
                labelLine: {
                  show: true
                },
                borderWidth: 4,//每个扇形直接留有空隙
                borderColor: "#0C1E2A",//空隙颜色设置
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                },
              },
            },
          }
        ]
      };

 

你可能感兴趣的:(echarts图例字体块文字颜色)