为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;

上一篇下一篇

猜你喜欢

热点阅读