Echarts自定義圖例legend
阿新 • • 發佈:2022-04-21
場景:如下圖,餅圖圖例顯示樣式
方法一、利用富文字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的呼叫需要先引入圖表例項