Echarts自定義圖例legend

場景：如下圖，餅圖圖例顯示樣式

方法一、利用富文本rich與formatter回調

查閱echarts官方文檔，legend圖例配置中：

1.單獨配置多個圖例；

// 圖例類型名稱
const legendLabels = [
    {
        type: 'square',
        labels: [
            '大類資產配置收益',
            '行業配置收益',
            '行業選股收益',
            '交易收益'
        ]
    }, {
        type: 'line',
        labels: ['總超額收益']
    }
]

// 根據圖例類型名稱生成圖表的legend配置
const legendData = legendLabels.map((item, idx) => ({
    icon: 'rect',
    bottom: 0,
    itemWidth: 10,
    textStyle: {
        color: '#434549',
        fontSize: 12
    },
    formatter (v) {
        return v + '      '
    },
    data: item.labels,
    itemHeight: item.type === 'line' ? 3 : 10,
    ...(item.type === 'line' ? {
        right: '20%'
    } : {
        left: '20%'
    })
}))

// set echart legend options
legend: legendData

2.利用rich富文本定義樣式

這里不做贅述，按照產品設計圖調整樣式，並在formatter回調函數中返回數據

方法二、自定義legend

1.頁面結構

根據設計圖仿寫legend結構，並調整樣式

<div class="levelbox">
      <div class="levelItem" @click="dispatchSel('A級')" @mouseover="dispatchHov('A級','highlight')" @mouseout="dispatchHov('A級','downplay')">
        <span :class="nameA?'dot dota':'dot dotgray'"></span>
        <span class="level levela"><span class="leveltext levela">A<span class="levelshadow leveltexta">A</span></span>級</span>
        <span class="rate">{{(data.acompanyProportion||'--')+'%'}}</span>
      </div>
      <div class="levelItem" @click="dispatchSel('B級')" @mouseover="dispatchHov('B級','highlight')" @mouseout="dispatchHov('B級','downplay')">
        <span :class="nameB?'dot dotb':'dot dotgray'"></span>
        <span class="level levelb"><span class="leveltext">B<span class="levelshadow leveltextb">B</span></span>級</span>
        <span class="rate">{{(data.bcompanyProportion||'--')+'%'}}</span>
      </div>
      <div class="levelItem" @click="dispatchSel('C級')" @mouseover="dispatchHov('C級','highlight')" @mouseout="dispatchHov('C級','downplay')">
        <span :class="nameC?'dot dotc':'dot dotgray'"></span>
        <span class="level levelc"><span class="leveltext">C<span class="levelshadow leveltextc">C</span></span>級</span>
        <span class="rate">{{(data.ccompanyProportion||'--')+'%'}}</span>
      </div>
      <div class="levelItem" @click="dispatchSel('黑名單')" @mouseover="dispatchHov('黑名單','highlight')" @mouseout="dispatchHov('黑名單','downplay')">
        <span :class="nameD?'dot dotd':'dot dotgray'"></span>
        <span class="black">黑名單</span>
        <span class="rate">{{(data.dcompanyProportion||'--')+'%'}}</span>
      </div>
    </div>

2.綁定鼠標交互事件，事件中調用echarts官方api  Actions

dispatchSel(name){
      switch (name) {
        case 'A級':
          this.nameA=!this.nameA
          break;
        case 'B級':
          this.nameB=!this.nameB
          break;
        case 'C級':
          this.nameC=!this.nameC
          break;
        case '黑名單':
          this.nameD=!this.nameD
          break;
        default:
          break;
      }
      this.myChart.dispatchAction({
          type: 'legendToggleSelect',
          // 圖例名稱
          name
      })
    },
    dispatchHov(name,type){
      this.myChart.dispatchAction({
          type,
          // 數據項的 index，如果不指定也可以通過 name 屬性根據名稱指定數據項
          // dataIndex?: number | number[],
          // 可選，數據項名稱，在有 dataIndex 的時候忽略
          name,
      });
    }

此時，自定義仿寫的legend也有了圖表點擊與hover交互效果

注意：actions  API的調用需要先引入圖表實例