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

news2024/10/7 14:32:49

背景

使用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: {
    // 选中状态icon
    active: '',
    // 未选中状态icon
    inactive: ''
  },
  ... // 更多套自定义图标 
}
// 图例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, // 图例icon
    show, // 是否展示图例
    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;
} // 默认选中项