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

起名-困难户

2024-04-16 帮助1人

一、前言

开工第一天，打开电脑不知道干啥，下午发现一个私信，询问一个前端问题。我真的是写后台的，前端只是一个临时工。但是抱着共同学习的态度查询了官网，回复了私信。但是一看时间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>

五、效果

学新通

六、不足

好像原效果的图例没有显示出来。

这篇好文章是转载于：学新通技术网

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

一、前言

二、描述

三、资料

四、实操

五、效果

六、不足

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

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

一、前言

二、描述

三、资料

四、实操

五、效果

六、不足

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐

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