为echarts生成的canvas添加点击事件(echarts-
2019-10-18 本文已影响0人
糕糕AA
需求:点击echarts生成的canvas图片中元素,打印出选中的元素
方法:需要在组件中添加onEvents点击事件
例子:
import React, {useMemo} from "react";
import ReactEcharts from "echarts-for-react";
const getOption = res => {
...
const series = {
type: "bar",
...
data: seriesData
};
return {
tooltip: {
...
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
show: false
},
yAxis: {
name: "$",
nameGap: 5,
nameTextStyle: {
color: "#999"
},
axisLabel: {
color: "#999"
},
type: "category",
data:...
},
grid: {
x: 70,
y: 20,
x2: 80,
y2: 30
},
series
};
};
const BarY = ({ data }) => {
const option = useMemo(() => {
return getOption(data);
}, [data]);
// 定义onEvents click事件
const onEvents = {
'click': (params) => {
console.log(params.name);
...
},
};
return (
<div className={cx("chart")}>
<ReactEcharts
option={option}
notMerge={true}
lazyUpdate={true}
style={{ height: "356px" }}
onEvents={onEvents}
{/* 注入onEvents事件 */}
/>
</div>
);
};
export default BarY;