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"
              }
            }
          }
        },
      }

你可能感兴趣的:(Echarts中关于自定义legend图例、文字)