Vue 图例自定义

最新推荐文章于 2023-12-19 14:38:25 发布

larica

最新推荐文章于 2023-12-19 14:38:25 发布

阅读量483

点赞数

分类专栏： Vue echarts 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45997679/article/details/127006374

版权

Vue 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

1、代码

data(){
return{
    option3: {
        legend: {
          show: true,
          icon: "circle",
          itemWidth: 12,
          itemHeight: 12,
          orient: "vertical",
          right: "10%",
          bottom: "center",
          formatter: (name) => {
            this.initEcharts();
            let target = "";
            let total = 0;
            for (var i = 0; i < this.lengendData.length; i++) {
              total += this.lengendData[i].value;
              if (this.lengendData[i].name === name) {
                target = this.lengendData[i].value;
              }
            }
            var percent = ((target / total) * 100).toFixed(2);
            return `{a|${name}}  {b|${target}家}  {b|${percent}%}`;
          },
          textStyle: {
            rich: {
              a: {
                color: "#fff",
              },
              b: {
                color: "#e04a45",
              },
            },
          },
        },
        color: [
          "#b571fd",
          "#2b98fe",
          "#31dcfe",
          "#fc9424",
          "#ede933",
          "#ff894e",
          "#ffc545",
          "#e27f3d",
          "#1890ff",
          "#bd2be8",
        ],
        series: [
          {
            name: "项目",
            roseType: "radius",
            hoverAnimation: false,
            type: "pie",
            center: ["30%", "50%"],
            radius: ["20%", "80%"],
            label: {
              show: false,
              position: "outside",
              formatter: "{d}%",
              fontSize: 14,
            },
            labelLine: {
              length: 5,
            },
            data: [
              {
                value: 9,
                name: "中压",
              },
              {
                value: 2,
                name: "高压",
              },
              {
                value: 13,
                name: "超高压",
              },
              {
                value: 23,
                name: "亚临界",
              },
              {
                value: 20,
                name: "超临界",
              },
            ],
          },
        ],
      },
}
},
methods:{
    initEcharts() {
      this.lengendData = this.option3.series[0].data;
    },
}