echarts导入地区.json文件生成地图
提前说明：
对于前端写大屏展示，在地图这一块有很多是直接引用的gis文件，但是也有一部分是使用的echarts数据可视化的地图。
本文只是简单的说一说我在使用echarts时是如何引用的。
另外我这边是Vue，echarts好像是试过 4.9 的某个版本 还有 5.1.2版本
想下载对应版本的话，例如 5.1.2 版本 ，直接：npm install echarts@5.1.2
步骤：
1、提前下载好需要的json文件，例如我在下面用到的是，中国的地图文件china.json，名字就都是随意的哈，你也可以叫zhongguo.json
2、在创建好的项目中安装echarts命令：npm install echarts
3、如果不是用的npm，也有其他的yarn等其他的包管理工具，都大差不差
4、安装完后这里建议直接在main.js里面引入并绑定在Vue原型上，因为可以不用每次在别的组件里面使用echarts的时候都要import echarts from 'echarts'
具体方法就是：
1、在main.js中引入echarts：import echarts from 'echarts'
2、绑定到原型上 ：vue.prototype.$echarts = echarts
以后需要用的时候就是直接 ：this.$echarts
这里后面会用到，具体往下看
5、在引入echarts的时候呢就顺便把地图引入进来吧 ，import china from '这里是你存放地图json文件的地址'
6、当然了在安装完成之前，什么节点啥的应该都创建好了哈
7、就是echarts的那几步了，init、option、setOption啥的
我的节点是：<div id="map" style = "width:800px;height:600px"></div>
这里是用的id，当然也可以用class、ref；但是为了保证不在别的页面串图重名啥的，Vue和React也都说了尽量不要过多使用ref嘛，就用id了
这里我是直接在mouted里面初始化和渲染
初始化：let myCharts = this.$echarts.init(document.getElementById('map'))
既然初始化了，那就直接把option也给干出来吧
定义：var option = {}
里面的东西就一会再填了哈
8、这一步就直接把地图数据放到echarts上去this.$echarts.registerMap('china', china)
注意这里两个china
第一个：字符串的'china'是你给这个地图取得名字，也可以是中文名 ‘中国’ ；
第二个：china是之前你在引入地图json文件的时候取的名，也就是第5步的时候import china from '存放json文件地址'，这个china你也可以写成zhongguo，但是相应的 ，在这里使用的时候，第二个china就得换成zhongguo
9、接下来就可以直接给option添加属性，让它可以读取地图数据
// 这里设置option的属性var option = {// 关联数据geo:{// 指定类型type:'map',// 读取的是那个地图，这里和之前在第 8 步的时候读文件的时候 取得名字对应map:'china', // 我这里用的是 'china' ，如果你是 '中国' 那就在这里填 '中国'// 一些其他属性zoom: 1.2, // 地图按比例显示 ，例如 填 2 就是放大 2倍 显示 roam: true, // 允许能对地图进行缩放、拖动 的操作lable: {show:true // 展示各地区名称}}}
10、最后就是渲染echarts了myCharts.setOption(option)
完整代码
main.js文件
import Vue from 'vue'import App from './App.vue'import axios from 'axios'import * as echarts from 'echarts';Vue.config.productionTip = falseVue.prototype.$axios = axiosVue.prototype.$echarts = echartsnew Vue({render: h => h(App)}).$mount('#app')
组件文件
<template><div id="map" style = "width:800px;height:600px"></div></template><script> import china from '../assets/json/china.json'export default {name: 'map',data() {return {// option 也可以在这里定义}},mounted() {this.$echarts.registerMap('china', china)let myCharts = this.$echarts.init(document.getElementById('map'))var option = {geo: {type: 'map',map: 'china',roam: true,zoom: 1.2,label: {show: true,}},}myCharts.setOption(option)}}</script><style scoped></style>
差不多一个地图就是这么展示的，如果还有其他想法和指定显示，可以在echarts官网查看相关属性。
