Echarts中关于自定义legend图例、文字

效果如下:


image.png

代码如下

      var data = [
        { name: "一次检验数/条", value: 150 },
        { name: "多次检验数/条", value: 80 }
      ];
    var option =  {
        legend: {
          show: true,
          left: "center",
          top: "245",
          itemHeight: 13,
          itemWidth: 13,
          itemGap: 35,
          icon: "circle",
          data: data,
          formatter: function(name) {
            var total = 0;
            var target;
            var value;
            for (let i = 0, l = data.length; i < l; i++) {
              value = data[i].value;
              total += data[i].value;
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            var arr = ["{a|" + name + "}", "{b|" + target + "}"];
            return arr.join("\n");
          },
          textStyle: {
            rich: {
              a: {
                color: "#B6B6B6",
                verticalAlign: "top",
                align: "center",
                fontSize: 12,
                padding: [0, 0, 28, 0]
              },
              b: {
                align: "left",
                fontSize: 18,
                padding: [0, 10, 10, 0],
                lineHeight: 25,
                color: "#181818"
              }
            }
          }
        },
      }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容