Echarts自定义地图点击事件

效果图：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echarts自定义地图点击事件</title>
    <style>
        body {
            margin: 0;
        }
        #chart {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script>
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        var option;
 
        myChart.showLoading();
        $.get('https://geo.datav.aliyun.com/areas_v3/bound/450700_full.json', function (geoJson) {
        myChart.hideLoading();
        echarts.registerMap('GuilLin', geoJson);
        myChart.setOption(
            (option = {
            title: {
                text: 'Echats自定义地图点击事件',
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
                }
            },
            visualMap: {
                min: 800,
                max: 50000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                name: '桂林市',
                type: 'map',
                map: 'GuilLin',
                label: {
                    show: true
                },
                data: [
                    { name: '钦南区', value: 20057.34 },
                    { name: '钦北区', value: 15477.48 },
                    { name: '灵山县', value: 1980.98 },
                    { name: '浦北县', value: 9172.94 }
                ],
                }
            ]
            })
        );
        });
 
        option && myChart.setOption(option);
 
        myChart.on('click', function (params) {
            const idx = params.dataIndex;
            console.log(idx, params.name, params.value);
            // to do
        });
 
    </script>
</body>
</html>复制

Echarts自定义地图点击事件

原生HTML通过JS（ES6、JQuery）引入公共模块(header,footer,menu等)实现模块化以及组件化，实现父子组件传值以及数据监听（基于Object.defineProperty）

Echarts数据可视化第3章 Echarts组件详解 3.6 数据区域缩放

通过echarts展示不同省、市、区地图 vue3写法

Echarts5.* 关系图谱(relation graph)添加节点拖拽、点击节点高亮效果

uniapp 中使用echarts，app端特别注意

解决echart重新绘制图表时闪烁的问题

Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】

Echarts graph关系图的使用（入门级）

Echarts 图表通用属性

HTML5新增的存储方式、及区别。

前端哥

jQuery——jQuery学习笔记(完整版）

靡语IT: JQuery-JavaScript代码库-动画篇

Ajax用法总结

JQuery之jsTree树形插件

Why React Doesn‘t Need jQuery?

原生HTML通过JS（ES6、JQuery）引入公共模块(header,footer,menu等)实现模块化以及组件化，实现父子组件传值以及数据监听（基于Object.defineProperty）

jQuery模板字符串

Echarts数据可视化第3章 Echarts组件详解 3.6 数据区域缩放

通过echarts展示不同省、市、区地图 vue3写法

Echarts5.* 关系图谱(relation graph)添加节点拖拽、点击节点高亮效果

1
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

2
移动端css布局大全

2024-02-06 15:02:421000

3
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

4
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

5
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

6
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

7
尚硅谷css3笔记

2024-02-13 10:02:44998

8
如何利用浏览器测试跨域

2024-02-11 10:02:28998

9
html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

10
响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Echarts自定义地图点击事件</title>
	<style>
	body {
	margin: 0;
	}
	#chart {
	width: 100vw;
	height: 100vh;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<script src="../lib/jquery.js"></script>
	<script src="../lib/echarts.min.js"></script>
	<script>
	var chartDom = document.getElementById('chart');
	var myChart = echarts.init(chartDom);
	var option;

	myChart.showLoading();
	$.get('https://geo.datav.aliyun.com/areas_v3/bound/450700_full.json', function (geoJson) {
	myChart.hideLoading();
	echarts.registerMap('GuilLin', geoJson);
	myChart.setOption(
	(option = {
	title: {
	text: 'Echats自定义地图点击事件',
	},
	tooltip: {
	trigger: 'item',
	formatter: '{b}<br/>{c} (p / km2)'
	},
	toolbox: {
	show: true,
	orient: 'vertical',
	left: 'right',
	top: 'center',
	feature: {
	dataView: { readOnly: false },
	restore: {},
	saveAsImage: {}
	}
	},
	visualMap: {
	min: 800,
	max: 50000,
	text: ['High', 'Low'],
	realtime: false,
	calculable: true,
	inRange: {
	color: ['lightskyblue', 'yellow', 'orangered']
	}
	},
	series: [
	{
	name: '桂林市',
	type: 'map',
	map: 'GuilLin',
	label: {
	show: true
	},
	data: [
	{ name: '钦南区', value: 20057.34 },
	{ name: '钦北区', value: 15477.48 },
	{ name: '灵山县', value: 1980.98 },
	{ name: '浦北县', value: 9172.94 }
	],
	}
	]
	})
	);
	});

	option && myChart.setOption(option);

	myChart.on('click', function (params) {
	const idx = params.dataIndex;
	console.log(idx, params.name, params.value);
	// to do
	});

	</script>
	</body>
	</html>

Echarts自定义地图点击事件

微信扫一扫：分享