Echarts中關于自定義legend圖例、文字

效果如下:


image.png

代碼如下

      var data = [
        { name: "一次檢驗數(shù)/條", value: 150 },
        { name: "多次檢驗數(shù)/條", 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"
              }
            }
          }
        },
      }
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容