Echart地图：地图区域点击事件（React）

HaanLen

已于 2022-06-22 23:24:03 修改

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Echart 文章标签： echarts 前端 javascript

于 2022-06-22 21:40:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_40119412/article/details/125417196

Echart 专栏收录该内容

27 篇文章

订阅专栏

该博客介绍了一种在React应用中使用ECharts库初始化地图图表的方法，并展示了如何处理地图元素的点击事件。代码示例展示了如何注册地图数据、设置图表选项以及监听并响应点击事件，从而在用户点击地图区域时获取详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

$vars: (3) ['seriesName', 'name', 'value']
borderColor: "#444"
color: "rgba(146,211,226,1)"
componentIndex: 0
componentSubType: "map"
componentType: "series"
data: {name: 'Islands', value: 3157}
dataIndex: 1
dataType: undefined
dimensionNames: []
encode: {value: Array(1)}
event: {type: 'click', event: PointerEvent, target: TSpan, topTarget: TSpan, cancelBubble: false, …}
name: "Islands"
seriesId: "\u0000series\u00000\u00000"
seriesIndex: 0
seriesName: "series\u00000"
seriesType: "map"
type: "click"
value: 3157

在这里插入图片描述

import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import './index.less';
import mapData from '../../pages/test/hongkong.json';

interface ECHARTINIT {
    options: any;
    type?: string;
    otherSource?: any;
    soureName?: string;
}
export default function EchartInit(props: ECHARTINIT) {
    const { options, type, soureName = '', otherSource } = props;
    const curRef = useRef(null);
    let echart: any = null;

    const initEchart = () => {
        echart = echarts.init(curRef.current as unknown as HTMLElement);
        if (type === 'map') {
            echarts.registerMap(soureName, { geoJSON: mapData });
        }
        window.addEventListener('resize', handleResize);
        //渲染
        options && echart.setOption(options);
    }

    const handleResize = () => {
        try {
            echart.resize();
        } catch (err) { }
    }

    useEffect(() => {
        initEchart();
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, [options]);

    useEffect(() => {
        echart.on('click', (params: any) => {
            console.log('params', params);
        })
    }, [])

    return (
        <div ref={curRef} className="echart"></div>
    )
}

在这里插入图片描述