前言
echarts的图例滚动是通过点击按钮实现的,而本次设计需要可以使用滚动条/鼠标滚轮进行滚动并支持模糊搜索,echarts不支持,那么就只能通过自定义整个图例来实现。
一、数据处理
图例的数据要和图的series的数据对应上,比如折线图的series里每个对象的name就应该和legend里的每个元素对应上。
二、示例
1.根据设计需要写出自定义图例
代码如下(示例):
const handleSelectedLegendItem = (d) => {
const currentLegendDataSelected = {
...legendDataSelected,
};
currentLegendDataSelected[d] = !legendDataSelected[d];
setLegendDataSelected(currentLegendDataSelected);
};
<div>
{legendData.map((d, i) => (
<Row onClick={() => handleSelectedLegendItem(d)} gutter={8} align="middle">
<Col>
<span className={styles.colorBox} style={{ backgroundColor: legendDataSelected[d] ? defaultThemeColors[i] : '#bfbfbf' }} />
</Col>
<Col style={{ color: legendDataSelected[d] ? '#000' : '#cdcdcd' }}>{d}</Col>
</Row>
))}
</div>
滚动条在样式里加入 overflow: scroll 即可
2.自定义图例能和echarts的图互动
代码如下(示例):
legend: {
show: false,
selected: legendDataSelected,
}
总结
实现并不复杂,但试图去修改echarts里自带的图例是失败的。
注意:颜色可以通过设置一组默认颜色来达到统一图和图例的颜色。