echarts 饼图 属性栏自定义写法

echarts 饼图 属性栏自定义写法

制作图：

导入代码：

getEchartData() {
      const chart = this.$refs.chart;
      const self = this;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          color: ["#36CBCB", "#F2637B","#4DCB73 ", "#975FE4", "#FAD337 ","#3BA0FF" ],
          //属性栏
          legend: {
            orient: "horizontal",
            icon: "circle",
            bottom: 0,
            itemHeight: 8,
            itemWidth: 8,
            textStyle: {
              fontSize: 14,
              fontFamily: "HelveticaNeue",
              rich:{
                  a:{
                    fontSize:14,
                  width:70,
              },
                  b:{
                    fontSize:14,
                      width:70,
                    },
                  c:{
                    fontSize:14,
                    width:60
                  }
              
              }

            },
            //导入的数据
            data: [
              { value: 103321, name: "定期储蓄 " },
              { value: 31231, name: "基金" },
              { value: 82341, name: "理财产品" },
              { value: 23113, name: "活期储蓄" },
              { value: 184544, name: "国债" },
              { value: 1231, name: "其他" },
            ],
            // 属性栏的自定义写法
            formatter: function(params) {
              self.sums =
                option.series[0].data[0].value +
                option.series[0].data[1].value +
                option.series[0].data[2].value +
                option.series[0].data[3].value +
                option.series[0].data[4].value +
                option.series[0].data[5].value;
              for (var i = 0; i < option.series[0].data.length; i++) {
                var per = Number(option.series[0].data[i].value / self.sums);
                var pers = Number(per * 100).toFixed(2);
                if (option.series[0].data[i].name == params) {
                  // return (  params +  " " + pers +"%  ￥ " + option.series[0].data[i].value + " " );
                  var target = option.series[0].data[i].value;
                 var arr = [
                '{a|'+params+'}'
                +
                '{b|'+((target/self.sums)*100).toFixed(2)+'%'+' }'
                +
                '{c|'+'¥'+target+'}'+'{d|}'
              ]
                }
              }
              return arr
            }
          },
          series: [
            {
              name: "访问来源",
              top: -100,
              type: "pie",
              radius: ["45%", "60%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
                formatter: "{b}：￥ {c} ",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "22",
                  fontWeight: "bold",
                }
              },
              data: [
                { value: 103321, name: "定期储蓄 " },
                { value: 31231, name: "基金" },
                { value: 23113, name: "活期储蓄" },
                { value: 1231, name: "其他" },
                { value: 82341, name: "理财产品" },
                { value: 184544, name: "国债" }
              ]
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      });
    },