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>
import $ from "jsonp";
import Highcharts from "highcharts";
import Highmaps from "highcharts/modules/map";
Highmaps(Highcharts);
import china from "../JS/china";

export default {
  name: "highmap",
  data() {
    return {
      map: null,
      timer: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      $(
        "https://data.jianshukeji.com/jsonp?filename=geochina/cities.json",
        (err, mapData) => {
          if (err) return;
          // 随机数据
          var beijing = mapData["北京"],
            chongqing = mapData["重庆"]
            data = [
              {
                x: beijing.x,
                y: -beijing.y,
                name: beijing.name,
                color: "#01ffff"
              },
              {
                x: chongqing.x,
                y: -chongqing.y,
                name: chongqing.name,
                color: "#01ffff"
              }
            ];
          let _this = this;
          this.map = new Highcharts.Map(this.$refs.highmaps, {
            chart: {
              backgroundColor: "transparent"
            },
            title: {
              text: ""
            },
            credits: {
              enabled: false
            },
            mapNavigation: {
              enabled: true,
              enableButtons: false,
              enableTouchZoom: true
            },
            legend: {
              enabled: false
            },
            colorAxis: {
              min: 0,
              minColor: "#fff",
              maxColor: "#006cee",
              labels: {
                style: {
                  color: "red",
                  fontWeight: "bold"
                }
              }
            },

            series: [
              {
                type: "map",
                mapData: china,
                joinBy: "name",
                name: "中国地图",
                nullColor: "rgba(21, 37, 99,.5)"
              },
              {
                type: "mappoint",
                name: "通过坐标描点",
                data: data,
                dataLabels: {
                  enabled: true,
                  useHTML: true,
                  color: "#01ffff",
                  formatter: function() {
                    return this.point.name;
                  }
                },
              }
            ]
          });
        }
      );
    },
  }
};
</script>
<style lang="less">
.high-maps {
  width: 100%;
  height: 100%;
}
</style>

效果如图：

写在最后：

整体效果完成之后，从使用方面来说没有echarts的map配置简单，使用起来方便，highmaps的中国地图外围轮廓和内轮廓好像不能够区分配置，而是通过border统一配置的，还不知道如何让外围轮廓高亮？
如有不妥之处欢迎下方留言指正~