echarts折线图/柱状图/饼图自定义图例（图例过多使用滚动条）

前言

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里自带的图例是失败的。
注意：颜色可以通过设置一组默认颜色来达到统一图和图例的颜色。