Echarts图例如何将选中与未选中状态配置成不同图形

背景

使用Echarts实现功能过程中，由于用户感觉Echarts图例的原生图案(例如圆形)不能直观地表现出该处可以点击筛选展示，故设计将选中的图例与未选中的图例设置成两种不同的图形(多为勾选与未勾选)。Echarts原生功能可以配置图例图案，但无法直接对未选中的图案进行自定义。

分析

Echarts图例legend中icon属性可以配置图例的图形，包括使用预制的几种图形、使用图片路径、使用path://开头的矢量图，以下使用矢量图作为示例。
虽然legend可以通过inactiveColor修改未选中的图形颜色，但是icon只能配置一套。此处考虑配置多个legend，即以数组的形式配置legend，分别设置各自的icon图形，并对需要在选中状态显示的那个图形中，使用inactiveColor: '#fff'将其未选中时隐藏起来(其余配置保持一致)，达到两套图案的效果，具体实现如下。

代码

// Echarts配置
legend: [{icon: iconStr, // 仅在选中状态显示top: '10%',right: '4%',itemWidth: 16,itemHeight: 16,inactiveColor: '#fff' // 在未选中状态下不显示},{icon: inactiveIconStr,top: '10%',right: '4%',itemWidth: 16,itemHeight: 16,}
];const iconStr = 'path://M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m345.344 334.848l-399.36 414.464a44.288 44.288 0 0 1-67.84 5.12 43.264 43.264 0 0 1-3.328-5.12l-220.16-228.096a47.36 47.36 0 0 1 0-65.28 43.264 43.264 0 0 1 62.72 0l192.768 199.936L793.6 269.824a43.264 43.264 0 0 1 62.72 0 47.36 47.36 0 0 1 1.024 65.024z';const inactiveIconStr = 'path://M511.867482 960.748421c-246.668982 0-447.332165-200.663182-447.332165-447.338305 0-246.666936 200.663182-447.331141 447.332165-447.331141 246.675122 0 447.337281 200.664206 447.337281 447.331141C959.204763 760.086262 758.542604 960.748421 511.867482 960.748421L511.867482 960.748421zM511.867482 129.9824c-211.428364 0-383.427716 172.000376-383.427716 383.427716 0 211.435527 172.000376 383.433856 383.427716 383.433856 211.43348 0 383.432833-171.998329 383.432833-383.433856C895.300314 301.982776 723.300962 129.9824 511.867482 129.9824L511.867482 129.9824zM511.867482 129.9824';

效果：
在这里插入图片描述

抽离为独立的配置方法

// 图例自定义
export const legendIconPath = {common: {// 选中状态iconactive: '',// 未选中状态iconinactive: ''},... // 更多套自定义图标 
}
// 图例icon大小
export const legendIconSize = {common: 12,...
}
// 图例位置
export const legendPosition = {right: '4%',middle: 'middle'
}
export const getLegendIcon = (type: type = 'common',show: show = true,position: position = 'right',selected: selected = {}
): Array<any> => {return [{// 仅激活时显示icon: legendIconPath[type].active, // 图例iconshow, // 是否展示图例top: '5%',right: legendPosition[position],itemWidth: legendIconSize[type],itemHeight: legendIconSize[type],inactiveColor: '#fff',selected // 默认选中状态},// 持续显示{icon: legendIconPath[type].inactive,show,top: '5%',right: legendPosition[position],itemWidth: legendIconSize[type],itemHeight: legendIconSize[type],selected}]
};// 参数定义
type type = 'common' | 'xxx'; // 图例类型(预设)
type show = boolean; // 是否显示
type position = 'right' | 'middle'; // 图例位置
interface selected {[propName: string]: boolean;
} // 默认选中项