为echarts生成的canvas添加点击事件(echarts-for-react)

需求:点击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 (
        
); }; export default BarY;

你可能感兴趣的:(为echarts生成的canvas添加点击事件(echarts-for-react))