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統一配置的，還不知道如何讓外圍輪廓高亮？
如有不妥之處歡迎下方留言指正~