Echarts自定义图例legend

阅读目录

• 方法一、利用富文本rich与formatter回调
• 方法二、自定义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的调用需要先引入图表实例