首页react Echarts自定义图例的点击事件

react Echarts自定义图例的点击事件

时间: 2024-11-17 15:30:28 浏览: 129

在React与ECharts结合的情况下，如果你想为自定义图例添加点击事件，你需要利用ECharts提供的`echarts.on`函数来监听图例的`click`事件。首先，在初始化ECharts实例时，你可以设置一个自定义图例，并在`myChart`上注册这个事件： ```jsx import React, { useRef } from 'react'; import { ECharts } from 'echarts'; function CustomLegendClickExample() { const chartRef = useRef(null); // 初始化图表 useEffect(() => { const myChart = echarts.init(chartRef.current); // 设置自定义图例 const customLegend = { data: ['数据1', '数据2'], onLabelClick: function (param) { console.log('图例项 ' + param.name + ' 被点击了'); // 在这里添加你的业务处理逻辑 } }; // 绘制图表并配置图例 myChart.setOption({ series: [ { name: '系列名称', type: 'bar', data: [...], }, //... ], legend: customLegend, }); return () => { myChart.dispose(); // 销毁图表释放资源 }; }, []); return <div ref={chartRef} />; } export default CustomLegendClickExample; ``` 在这个例子中，当用户点击图例中的某个项时，控制台会打印出相应的标签名，并可以根据需要执行额外的操作。

阅读全文