怎么用echarts画地图
时间: 2023-09-13 18:09:52 浏览: 102
![PDF](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PDF.png)
echarts地图制作
![star](https://csdnimg.cn/release/wenkucmsfe/public/img/star.98a08eaa.png)
使用ECharts 5可以很方便地画地图。下面是使用ECharts 5画地图的基本步骤:
1.引入ECharts 5的JS文件和地图数据
需要在HTML页面中引入ECharts 5的JS文件和地图数据,可以从ECharts官网下载。
2.创建一个HTML元素来展示地图
在HTML页面中创建一个元素,用于展示地图。例如:
```
<div id="map" style="width: 800px;height:600px;"></div>
```
3.初始化地图
在JS文件中,使用以下代码初始化地图:
```
var myChart = echarts.init(document.getElementById('map'));
```
4.配置地图
使用ECharts的option配置项来配置地图。其中,需要设置地图类型、地图数据、地图的样式和数据等。例如:
```
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京',
value: Math.round(Math.random() * 1000)
}, {
name: '天津',
value: Math.round(Math.random() * 1000)
}, {
name: '上海',
value: Math.round(Math.random() * 1000)
}]
}]
};
```
上面的代码中,我们使用了中国地图(mapType: 'china')并设置了三个数据点(北京、天津、上海)。数据点的值是随机生成的。
5.渲染地图
使用以下代码将地图渲染到页面上:
```
myChart.setOption(option);
```
完整的代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用ECharts画地图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
</head>
<body>
<div id="map" style="width: 800px;height:600px;"></div>
<script>
var myChart = echarts.init(document.getElementById('map'));
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [{
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京',
value: Math.round(Math.random() * 1000)
}, {
name: '天津',
value: Math.round(Math.random() * 1000)
}, {
name: '上海',
value: Math.round(Math.random() * 1000)
}]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
```
运行代码后,就可以看到生成的地图了。
阅读全文
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)