如何引入china.js做地图可视化
时间: 2024-06-07 10:11:57 浏览: 12
要在网页上使用 china.js 进行地图可视化,需要按照以下步骤进行操作:
1. 首先,在 HTML 文件中引入 china.js 文件和 echarts.js 文件
```html
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.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>
```
2. 创建一个 div 容器,用于显示地图
```html
<div id="chart" style="width: 100%; height: 500px;"></div>
```
3. 在 JavaScript 代码中,实例化一个 echarts 对象,并配置地图选项
```javascript
var myChart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (人)'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#e0ffff', '#006edd']
}
},
series: [
{
name: '人数',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '北京', value: Math.round(Math.random()*1000)},
{name: '天津', value: Math.round(Math.random()*1000)},
{name: '上海', value: Math.round(Math.random()*1000)},
{name: '重庆', value: Math.round(Math.random()*1000)},
{name: '河北', value: Math.round(Math.random()*1000)},
{name: '河南', value: Math.round(Math.random()*1000)},
{name: '云南', value: Math.round(Math.random()*1000)},
{name: '辽宁', value: Math.round(Math.random()*1000)},
{name: '黑龙江', value: Math.round(Math.random()*1000)},
{name: '湖南', value: Math.round(Math.random()*1000)},
{name: '安徽', value: Math.round(Math.random()*1000)},
{name: '山东', value: Math.round(Math.random()*1000)},
{name: '新疆', value: Math.round(Math.random()*1000)},
{name: '江苏', value: Math.round(Math.random()*1000)},
{name: '浙江', value: Math.round(Math.random()*1000)},
{name: '江西', value: Math.round(Math.random()*1000)},
{name: '湖北', value: Math.round(Math.random()*1000)},
{name: '广西', value: Math.round(Math.random()*1000)},
{name: '甘肃', value: Math.round(Math.random()*1000)},
{name: '山西', value: Math.round(Math.random()*1000)},
{name: '内蒙古', value: Math.round(Math.random()*1000)},
{name: '陕西', value: Math.round(Math.random()*1000)},
{name: '吉林', value: Math.round(Math.random()*1000)},
{name: '福建', value: Math.round(Math.random()*1000)},
{name: '贵州', value: Math.round(Math.random()*1000)},
{name: '广东', value: Math.round(Math.random()*1000)},
{name: '青海', value: Math.round(Math.random()*1000)},
{name: '西藏', value: Math.round(Math.random()*1000)},
{name: '四川', value: Math.round(Math.random()*1000)},
{name: '宁夏', value: Math.round(Math.random()*1000)},
{name: '海南', value: Math.round(Math.random()*1000)},
{name: '台湾', value: Math.round(Math.random()*1000)},
{name: '香港', value: Math.round(Math.random()*1000)},
{name: '澳门', value: Math.round(Math.random()*1000)}
]
}
]
};
myChart.setOption(option);
```
以上代码会生成一个带有随机数据的中国地图。可以根据实际需求修改数据和样式。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)