Vue —— echarts legend中显示value+自定义样式

默认legend展示是没有value值的，但是需求要求不仅需要展示value值，而且name及value样式展示要不同

formatter 处理name及value都展示方式：

rich 处理name及value值样式调整：

完整代码如下：

<span style="font-weight:600">登录量</span>
<div
    class="echart"
    id="loginnum-echart"
    :style="{ float: 'left', width: '100%', height: '230px' }"
  ></div>

<script>
import * as echarts from "echarts";
import { pieEchart } from "../util/echart";
export default {
  name: "PieEchart",
  data() {
    return {
      loginnumName: "登录量",
      loginnumData: [
        { value: 1000, name: "admin" },
        { value: 700, name: "weibo" },
        { value: 600, name: "yue" },
        { value: 500, name: "qian" },
        { value: 400, name: "long" },
        { value: 300, name: "others" }
      ],
    };
  },
  mounted() {
     let loginnum_echart = document.getElementById("loginnum-echart");
    this.loginnuminitChart(
      loginnum_echart,
      this.loginnumName,
      this.loginnumData
    );
  },
  methods: {
    loginnuminitChart(id, name, pieData) {
      this.renderInitEchart(id, name, pieData);
    }
    renderInitEchart(id, name, pieData) {
      let getchart = echarts.init(id);
      let option = pieEchart(name, pieData);
      getchart.setOption(option);

      getchart.on("mouseover", function() {
        getchart.setOption({
          series: [
            {
              label: {
                show: false
              }
            }
          ]
        });
      });

      getchart.on("mouseout", function() {
        getchart.setOption({
          series: [
            {
              label: {
                show: true
              }
            }
          ]
        });
      });

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    }
  }
};
</script>

util/echarts.js

function pieEchart(name, data) {
  let option = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      left: 180,
      top: 30,
      icon: "rect",
      itemHeight: 44,
      itemWidth: 10,
      selectedMode: false,
      textStyle: {
        rich: {
          name: {
            fontSize: 14,
            color: "#011",
            padding: [4, 0, 0, 0]
          },
          num: {
            fontSize: 22,
            fontWeight: 600,
            padding: [10, 0, 0, 0],
            color: "#000"
          }
        }
      },
      formatter: function(name) {
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }

        return [`{name|${name}}`, `{num|${tarValue}}`].join("\n");
      }
    },
    series: [
      {
        name,
        center: ["15%", "42%"],
        type: "pie",
        radius: ["40%", "60%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          formatter: "{c}",
          fontSize: "26",
          fontWeight: "600"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "26",
            fontWeight: "600"
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  };

  return option;
}

echarts官方文档地址：https://echarts.apache.org/zh/option.html#legend.textStyle.rich