为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 (
        <div className={cx("chart")}>
            <ReactEcharts
                option={option}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: "356px" }}
                onEvents={onEvents}   
                {/*  注入onEvents事件 */}
            />
        </div>
    );
};
export default BarY;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容