怎么用echarts画地图
时间: 2023-09-13 08:09:52 浏览: 36
使用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>
```
运行代码后,就可以看到生成的地图了。