数据可视化之地图

1. 在项目中引入Echarts

• 在index.html文件中引入echarts.min.js文件
  

• 在main.js文件中挂载Echarts到vue原型
  

• 在组件中通过axios获取到地图的矢量数据，由于地图矢量数据不是在服务器存储，而是在本地存储的，所以要在组件中另外引入axios请求地图矢量数据，并且要调用Echarts的registerMap方法，将地图的矢量数据注册给全局的Echarts对象，然后配置geo（只有地图配置geo，别的图表都是配置series）

• 此处需要注意的是css样式，由于要做成自适应，所以div一般设置width和height均为100%，此时一定要记得设置html, body, #app的width和height均为100%，否则div无法继承高度，图表无法加载出来，因为图表加载一定要div元素有宽高才可以
  

2. 图表的一些配置

3. 点击地图实现省份地图和中国地图之间的切换

实现原理：点击地图实例时，实现geo的map值在省份和中国地图之间进行切换

点击地图实例时，获取到的arg参数中会包含省份的名字信息和省份地图矢量数据的文件的路径信息，通过文件将省份的名字转换为拼音来获取具体的省份地图矢量数据，注册到全局的Echarts对象，然后实现geo的map值切换即可

4. 地图根据浏览器不同屏幕大小实现自适应

实现原理：获取Echarts的div容器的宽度offsetWidth，然后对文字或者图例大小实现自适应，图表实例调用resize方法实现自适应即可