Echartas中关于自定义legend（图例+文字）样式

Echartas中关于自定义legend（图例+文字）样式

formatter有两种形式：
1、模板
2、回调函数
模板：
使用字符串模板，模板变量为图例名称 {name}
formatter: ‘Legend {name}’
回调函数：
formatter: function (name) {
return 'Legend ’ + name;
}
想自定义图例文字样式，需要用到富文本：rich。

效果图：

html:

<template>
  <div>
    <div id="myChart"
         class="pie"></div>
  </div>
</template>

css:

<style lang="scss" scoped>
.pie {
  margin: auto;
  width: 400px;
  height: 300px;
}
</style>

js:

<script>
import echarts from "echarts"; //引入echarts
export default {
  methods: {
    initPieChart () {
      let data = [
        { value: 62, name: "视频广告" },
        { value: 243, name: "搜索引擎" }
      ];
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          // 图例的位置
          top: 60,
          right: 0,
          data: ["视频广告", "搜索引擎"],
          // ========自定义图例和文字====================
          formatter: function (name) {
            let target;
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                target = data[i].value
              }
            }
            let arr = ["{a|" + target + "}", "{b|" + name + "}"]
            return arr.join("\n")
          },
          textStyle: {
            // 为了图例与第二行文字对齐，需要设置两个样式的padding，把文字顶到合适的位置，然后为了上下行的间隔，设置了第2行文字的行高
            rich: {
              a: {
                fontSize: 30,
                color: ['#ea5817', '#80878e'],
                padding: 0,
                align: 'center',
                fontWeight: 600
              },
              b: {
                fontSize: 14,
                color: "#000",
                align: 'center',
                lineHeight: 50,//上下字体位置
                padding: [28, 0, 0, 10],//图例位置
                fontWeight: 600
              }
            },
          }
          // ========================================
        },
        series: [
          {
            name: "占比图",
            type: "pie",
            radius: ["40%", "60%"],
            center: ['30%', '50%'],//占比图位置
            color: ['#ea5817', '#80878e'],//自定义颜色
            avoidLabelOverlap: false,
            // 隐藏标示线和文字
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              },
            },
            label: {
              // show: true,
              position: "outer",
              fontSize: "16",
              alignTo: "none",
              bleedMargin: 100
            },
            emphasis: {
              label: {
                position: "center",
                // show: true,
                fontSize: "20",
                fontWeight: "bold"
              }
            },
            labelLine: {
              // show: true,
              length: 5
            },
            data: data
          }
        ]
      };
      let chart = echarts.init(document.getElementById("myChart"));
      chart.setOption(option);
    }
  },
  mounted () {
    this.initPieChart();
  },
}
</script>