当前位置：首页 > news >正文

echarts地图可视化展示

news 2024/12/26 5:40:25

地图可视化展示

- 获取地图json数据
- 下载json数据
- 代码示例

获取地图json数据

全国各地市json文件下载地址：
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

https://hxkj.vip/demo/echartsMap/

下载json数据

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts 中国地图</title><!-- 引入 ECharts 文件 --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个 DOM 容器 -->
<div id="main" style="width: 70%; height: 800px;"></div>
<script type="module" src="河南省.js"></script>
<script type="module">import { map_data } from './河南省.js';// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 注册地图echarts.registerMap('henan', map_data);// 指定图表的配置项和数据var option = {title: {text: '各省份景点访问量',x: 'center',textStyle: {fontSize: 18,color: 'black'}},tooltip: {trigger: 'item',backgroundColor: 'black',formatter: '地区：{b}<br/>客流量：{c}'},visualMap: {top: 'center',left: 'left',min: 10,max: 500000,text: ['High', 'Low'],realtime: true,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},series: [{name: '模拟数据',type: 'map',mapType: 'henan',roam: false,itemStyle: {normal: {label: {show: true,textStyle: {color: 'black'}}},emphasis: {label: {show: true}}},data: [ { name: '郑州市', value: 350000 }]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>