Echart餅圖圖例（legend）與tooltip内容不一緻的以及圖例過長的處理

在legend裡寫formatter回調函數進行内容拼接

1.此處由于圖例太長，同時在回調函數裡寫了拼接函數

2.這樣的寫法要注意大的option{}，需要寫成let option={}；如果寫成this.option後回調函數不起作用

legend: {
          orient: 'vertical',
          left:'58%',
          top:'24%',
          icon:'circle',
          textStyle: { 
            color:'rgba(64,64,64,1)',
             lineHeight:'20'
        },         
        formatter: function(params) {
            let data = option.series[0].data;
            let newValue = 0;
            let newPercent = 0;
            for (let i = 0; i < data.length; i++) {
                if (data[i].name == params) {
                    newValue = data[i].value;
                    newPercent = capacityStatusPercent[i];
                }
            }
            var newName = "";
            var nameLength = params.length;
            if (nameLength > 8) {
                newName = '···' + params.substr(-8);
            } else {
                newName = params;
            }
            return newName + ' ' + newValue + 'GB' + ' ' + newPercent + '%';
        },
      },
           

總體圖表函數如下：

let option = {
      title:{
              show:true,
              text:'已用總容量',
              subtext:capacityStatusTotal + 'GB',
              textStyle:{
                  color:'rgba(64,64,64,1)',
                  fontFamily :'PingFangSC-Medium,PingFangSC',
                  fontWeight:'500',
                  fontSize:'14px',
              },
              subtextStyle:{
                  color:'rgba(64,64,64,1)',
                  fontFamily :'PingFangSC-Medium,PingFangSC',
                  fontWeight:'500',
                  fontSize:'14px',
              },
              left:'29%',
              top:'41%',
              textAlign:'center',
      },
      series: [
        {    
            name:'容量狀态概覽',
            type:'pie',
            center:['30%', '48%'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:capacityStatusAmount[0], name:capacityStatusName[0] },
                {value:capacityStatusAmount[1], name:capacityStatusName[1] },
                {value:capacityStatusAmount[2], name:capacityStatusName[2] },
                {value:capacityStatusAmount[3], name:capacityStatusName[3] },
                {value:capacityStatusAmount[4], name:capacityStatusName[4] },
            ]
        }
    ],
      tooltip: {
          trigger: 'item',
          formatter: "{b}: {c}GB ({d}%)",
          confine:'true',//限制在顯示框裡
           // 固定在頂部
          position: function (point) { 
            return [point[0], '10%'];
        }       
      },
      legend: {
          orient: 'vertical',
          left:'58%',
          top:'24%',
          icon:'circle',
          textStyle: { 
            color:'rgba(64,64,64,1)',
             lineHeight:'20'
        },         
        formatter: function(params) {
            let data = option.series[0].data;
            let newValue = 0;
            let newPercent = 0;
            for (let i = 0; i < data.length; i++) {
                if (data[i].name == params) {
                    newValue = data[i].value;
                    newPercent = capacityStatusPercent[i];
                }
            }
            var newName = "";
            var nameLength = params.length;
            if (nameLength > 8) {
                newName = '···' + params.substr(-8);
            } else {
                newName = params;
            }
            return newName + ' ' + newValue + 'GB' + ' ' + newPercent + '%';
        },
      },
  };
  return option;