vue中使用echarts+Highmaps开发数据可视化大屏(数据分析/数据看板/科技感页面)

echarts和highchart的区别

echarts

echarts的前身是百度公司前端开发的一个图表库，后捐献给阿帕奇公司维护。
支持柱状图、饼状图、k线图、map图、热导向图、折线图等常用图表，
主要采用canvas画图。

highchart

highcharts是国外的一家公司开发的图表库，主要采用svg画图。
支持的图表也很多，功能也比较强大。
到底是使用echarts还是使用highchart呢？(萝卜青菜各有所爱，当然你也可以选择G2等一些图表库)

此项目之所以使用echarts+highcharts混合方式，是因为有些功能是echarts无法完成的，只好使用highcharts去完成，这篇文章也主要介绍地图的使用这部分内容。
需求：触摸屏幕能够双指放大或者缩小，鼠标同时也要满足滚轮或者双击实现放大缩小，这么看上去echarts的地图好像也能完成，但是，我要说但是了，在实际的触摸大屏上面双指并不能行，被放大或者缩小的是整张web页面，而不是地图的canvas区域，使用highcharts的地图发现是可以完成的，并且HIGHMAPS 的api上也有相应的配置说明

如何在vue中使用Highmaps？

第一步：先安装依赖

npm install highcharts --save

第二步：在需要引入的map的组件中引入使用

  import Highcharts from 'highcharts'
  import Highmaps from 'highcharts/modules/map'
  Highmaps(Highcharts);

需求是需要做一个中国打点地图，那么就需要引入下china.js,这个js文件下载下来作为本地文件引入使用，cdn服务器不稳定会造成地图不能出来

中国地图数据js：https://data.jianshukeji.com/geochina/china.js
世界地图数据js：https://img.hcharts.cn/mapdata/custom/world.js
如果你需要其他某个国家的地图基础数据可以在这里下载

下载中国地图基础数据完事之后的js文件我们不能直接拿来用，因为会报错Highcharts找不到，把Highcharts.maps[“cn/china”]这个对象修改为直接export default出去即可，修改如下图：

然后引入china.js这个文件并使用

import china from "../JS/china";

如果还需要标点，也有三种方式进行标点，可以查看这个中国地图标点demo

这里采用坐标方式进行标点，整个highmaps组件代码如下：

<template>
  <div ref="highmaps" class="high-maps"></div>
</template>

<script>
imp