vue中使用echarts中国地图

项目中需要在中国地图上显示各省数据，所以想到了echarts的map。

由于之前没用过，所以也是踩了一些坑。

最先遇到的是如何获取中国地图数据，echarts官网实例的数据是美国的，而在线生成地图数据的插件由于某种原因下线了，上线时间未知……

当时我就傻眼了，和产品经理说：“这个需求做不了……”，产品点点头，说：“你过来一下。”，我跑到了她的工位上，只见她拉开抽屉，里边躺着一把菜刀，我当时腿一哆嗦，“能做！！！”

挠着我为数不多的头发，开始了漫长的搜索之路。

“echarts中国地图数据” ——下载下来是乱码……

“echarts最新中国地图数据”——下载下来还是乱码……

好吧，我换了个思路。

“echarts中如何使用中国地图” 搜出一堆结果，发现这次搜索的结果很有用，某个答案上说在vue项目中，下载的echarts插件中自带中国地图数据，然后愉快的打开编辑器开始写bug。

果然不出所料，我写代码没有不出bug的，写好之后出现了 “this.chart.registerMap is not a function” 这个报错，仔细排查之后发现，registerMap方法只有echarts原型对象中才有，init后的对象中是没有的。

修复bug后拿给产品经理看，产品经理说我审美好差，为什么颜色这么丑，我听了这话当时就爆发了，“你要是嫌不好看！我就改一些好看的……”

下面贴代码

let mapData = {
            tooltip : {},
            visualMap: {
              left: 'right',
              min: 0,
              max: 999999,
              inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
              },
              text:['High','Low'],           // 文本，默认为数值文本
              calculable: true
            },           
            series : [
              {
                name: self.pieName, // 默认名字，tooltip的title
                type: 'map',
                roam: true,
                map: 'china',// 这里要跟registerMap方法中第一个参数对应
                itemStyle:{
                  emphasis:{label:{show:true}}
                },
                // 文本位置修正
                textFixed: {
                  Alaska: [20, -20]
                },
                data: data,// 需要显示在地图上的数据 [{name:台湾,value:'是中国的'},{name:香港,value:'别搞事情'}]
              }
            ]
          }

import echarts from 'echarts'
import china from 'echarts/map/js/china.js'
echarts.registerMap('china', require('echarts/map/json/china.json'))



this.chart = echarts.init(document.getElementById(this.id),'light')   
this.chart.setOption(mapData)