Echarts+Vue地图

本文详细介绍了如何使用Echarts和Vue.js来绘制中国地图,包括地图json文件的获取、地区对应的json文件结构解析,以及在实际项目中如何应用这些地图数据进行展示。

一、画echarts地图:

教你从零开始画echarts地图_cRack_cLick的博客-优快云博客_echarts地图

二、地图json地区对应:

点开json文件会有些信息能确定是哪个省市,这里我就帮大家花点时间整理一下。

下载链接:

GitHub - lyingying/echarts-mapJson: 中国各省市县区地图json包

目录结构:

geometryCouties
geometryProvince
README.md
china.json
对应地区的相应json文件
中国地图json文件
china.json就是中国地图

各省地图json文件
获得途径:在china,json文件中,按id找即可,以下是匹配结果,可以通过【Ctrl+F 查找】快速检索了:

geometryProvince文件夹中:

11.json:北京市
12.json:天津市
13.json:河北省
14.json:山西省
15.json:内蒙古自治区
21.json:辽宁省
22.json:吉林省
23.json:黑龙江省
31.json:上海市
32.json: 江苏省
33.json:浙江省
34.json:安徽省
35.json:福建省
36.json:江西省
37.json:山东省
41.json:河南省
42.json:湖北省
43.json:湖南省
44.json:广东省
45.json:广西壮族自治区
46.json:海南省
50.json:重庆市
51.json:四川省
52.json:贵州省
53.json:云南省
54.json:西藏自治区
61.json:陕西省
62.json:甘肃省
63.json:青海省
64.json:宁夏回族自治区
65.json:新疆维吾尔自治区
71.json:台湾省
81.json:香港特别行政区
82.json:澳门特别行政区
各市地图json文件
geometryCouties文件夹内放的都是各省下的市,找某省下的市的方法是按上面省的编号在geometryProvince里找,eg:找安徽的市,就在geometryProvince中,找34开头的json文件。

获得途径:和上面一样。

11.json:北京市【只有一个110100.json】
12.json:天津市【只有一个120100.json】
13.json:河北省
130800.json:承德市
130700.json:张家口市
130600.json:保定市
130200.json:唐山市
130900.json:沧州市
130100.json:石家庄市
130500.json:邢台市
130400.json:邯郸市
130300.json:秦皇岛市
131100.json:衡水市
131000.json:廊坊市
14.json:山西省
140900.json:忻州市
141100.json:吕梁市
141000.json:临汾市
140700.json:晋中市
140800.json:运城市
140200.json:大同市
140400.json:长治市
140600.json:朔州市
140500.json:晋城市
140100.json:太原市
140300.json:阳泉市
15.json:内蒙古自治区
150700.json:呼伦贝尔市
152900.json:阿拉善盟
152500.json:锡林郭勒盟
150600.json:鄂尔多斯市
150400.json:赤峰市
150800.json:巴彦淖尔市
150500.json:通辽市
150900.json:乌兰察布市
152200.json:兴安盟
150200.json:包头市
150100.json:呼和浩特市
150300.json:乌海市
21.json:辽宁省
210200.json:大连市
211300.json:朝阳市
210600.json

### 安装 ECharts 为了在 Vue2 项目中使用 ECharts 绘制中国省份地图,需先安装 ECharts 依赖包。这可以通过 npm 来完成: ```bash $ npm install echarts --save ``` 随后,在 Vue 的 JavaScript 文件中引入 ECharts[^1]。 ### 导入 ECharts地图数据 确保通过如下方式导入 ECharts 库: ```javascript import * as echarts from 'echarts'; ``` 接着,需要加载特定的地图 JSON 数据文件。对于中国的省级地图,可以从官方仓库获取对应的 JSON 文件并注册到 ECharts 实例中: ```javascript // 假设已经下载了 china.json 并放置于合适位置 import ChinaMapData from './path/to/china.json'; echarts.registerMap('china', ChinaMapData); ``` ### 创建图表实例 创建一个新的组件用于显示地图,并初始化 ECharts 图表实例: ```html <template> <div ref="mapContainer" style="width: 600px; height: 400px;"></div> </template> <script> export default { mounted() { this.initChart(); }, methods: { initChart() { const chartInstance = echarts.init(this.$refs.mapContainer); let option = { title: { text: '中国省份地图', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['高', '低'], calculable: true }, series: [ { name: '随机数据', type: 'map', mapType: 'china', roam: false, label: { show: true }, data: [] } ] }; chartInstance.setOption(option); } } }; </script> ``` 上述代码展示了如何配置基本的地图选项以及设置初始数据显示为空数组。实际应用时可以根据需求填充 `data` 字段中的具体数值[^2]。 ### 动态更新数据 当有新的统计数据或者交互事件触发时,可以调用 `chartInstance.setOption()` 方法来刷新视图上的内容,从而实现实时的数据可视化效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值