ECharts 地图点击事件可获取数据可执行其他操作

一、前言开工第一天，打开电脑不知道干啥，下午发现一个私信，询问一个前端问题。我真的是写后台的，前端只是一个临时工。但是抱着共同学习的态度查询了官网，回复了私信。但是一看时间1月28（今天2月8号，1月23号放的假哈哈）可能他已经解决了这个问题，也没什么事情做就记录下，万一下次能用得上呢。二、描述使用ECharts，画中国地图，使用点击事件获取点击的数据。三、资料使用ECharts画地图的文档点击事

起名-困难户

11376人浏览 · 2022-02-08 18:04:26

起名-困难户 · 2022-02-08 18:04:26 发布

一、前言

开工第一天，打开电脑不知道干啥，下午发现一个私信，询问一个前端问题。我真的是写后台的，前端只是一个临时工。但是抱着共同学习的态度查询了官网，回复了私信。但是一看时间1月28（今天2月8号，1月23号放的假哈哈）可能他已经解决了这个问题，也没什么事情做就记录下，万一下次能用得上呢。

二、描述

使用ECharts，画中国地图，使用点击事件获取点击的数据。

三、资料

使用ECharts画地图的文档

点击事件的文档

画中国地图的资料（这个也不知道谁抄谁的反正看到好多一样的）

四、实操

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>mapTest</title>
    <script type="text/javascript" src="static/js/echarts.min.js"></script>
    <script type="text/javascript" src="static/js/china.js"></script>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var mydata = [
            { name: '北京', value: '100' }, { name: '天津', value: randomData() },
            { name: '上海', value: randomData() }, { name: '重庆', value: randomData() },
            { name: '河北', value: randomData() }, { name: '河南', value: randomData() },
            { name: '云南', value: randomData() }, { name: '辽宁', value: randomData() },
            { name: '黑龙江', value: randomData() }, { name: '湖南', value: randomData() },
            { name: '安徽', value: randomData() }, { name: '山东', value: randomData() },
            { name: '新疆', value: randomData() }, { name: '江苏', value: randomData() },
            { name: '浙江', value: randomData() }, { name: '江西', value: randomData() },
            { name: '湖北', value: randomData() }, { name: '广西', value: randomData() },
            { name: '甘肃', value: randomData() }, { name: '山西', value: randomData() },
            { name: '内蒙古', value: randomData() }, { name: '陕西', value: randomData() },
            { name: '吉林', value: randomData() }, { name: '福建', value: randomData() },
            { name: '贵州', value: randomData() }, { name: '广东', value: randomData() },
            { name: '青海', value: randomData() }, { name: '西藏', value: randomData() },
            { name: '四川', value: randomData() }, { name: '宁夏', value: randomData() },
            { name: '海南', value: randomData() }, { name: '台湾', value: randomData() },
            { name: '香港', value: randomData() }, { name: '澳门', value: randomData() }
        ];
        var optionMap = {
            backgroundColor: '#FFFFFF',
            title: {
                text: '全国地图大数据',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },

            //左侧小导航图标
            visualMap: {
                show: true,
                x: 'left',
                y: 'center',
                splitList: [
                    { start: 500, end: 600 }, { start: 400, end: 500 },
                    { start: 300, end: 400 }, { start: 200, end: 300 },
                    { start: 100, end: 200 }, { start: 0, end: 100 },
                ],
                color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
            },
            //配置属性
            series: [{
                name: '数据',
                type: 'map',
                mapType: 'china',
                roam: true,
                label: {
                    normal: {
                        show: true  //省份名称
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: mydata  //数据
            }],
        };
        function randomData() {
            return Math.round(Math.random() * 500);
        };
        myChart.on('click', function (params) {
            alert(params.data.name + ':' + params.data.value);
        });
        myChart.setOption(optionMap);

    </script>
</body>

</html>