Vue -- highcharts map使用

highcharts中国地图使用

highcharts非商用免费，所以大多数正式上线的网站都会选择开源免费的echarts，其实，对于开发者highcharts功能也是很庞大的

下载npm install highcharts -S

vue文件引入

<template>
  <div>
    <div
      ref="mapChina"
      :class="className"
      :style="{ height: height, width: width }"
    />
  </div>
</template>
<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
// import HighchartsDrilldown from 'highcharts/modules/drilldown';
// import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from "highcharts/modules/map";
HighchartsMore(Highcharts);
// HighchartsDrilldown(Highcharts);
// Highcharts3D(Highcharts);
Highmaps(Highcharts);
// @/assets/map/china.js 为 https://data.jianshukeji.com/geochina/china.js 文件export default {"title":"中国"...... 引入
import china from "@/assets/map/china.js";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "460px",
    },
    chinaMapData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    copydeep(obj) {
      var newobj = obj.constructor === Array ? [] : {};
      if (typeof obj !== "object") {
        return;
      }
      for (var i in obj) {
        newobj[i] = typeof obj[i] === "object" ? this.copydeep(obj[i]) : obj[i];
      }
      return newobj;
    },
    initChart() {
      var that = this;
      // 将传过来的值进行深拷贝（如果数据是上一级传递下来的，并且还有table需要使用，这里需要重新定义一个变量接收）
      // var data = this.copydeep(this.chinaMapData);
      var data = [];
      data.push({"name":"辽宁","citys":[], value: 0})
      data.push({"name":"重庆","citys":[{"name":"重庆市","value":1,"ratio":100.0}], value: 1})
      data.push({"name":"上海","citys":[{"name":"上海市","value":2,"ratio":100.0}], value: 2})
      data.push({"name":"天津","citys":[{"name":"天津市","value":3,"ratio":100.0}], value: 3})
      that.chart = new Highcharts.Map(this.$refs.mapChina, {
        chart: {},
        title: {
          text: "",
        },
        credits: { enabled: false }, // 版权信息
        tooltip: {
          formatter: function () {
            if (!this.point.value) {
              return this.point.name;
            } else {
              return this.point.name + "：" + this.point.value;
            }
          },
        },
        colorAxis: {
          min: 0,
          minColor: "#fff",
          maxColor: "#006cee",
          tickColor: "#ff0000",
          labels: {
            style: {
              color: "red",
              fontWeight: "bold"
            },
          },
        },
        series: [
          {
            cursor: "pointer",
            data: data,
            mapData: china,
            joinBy: "name",
            title: "",
            states: {
              hover: {
                color: "#a4edba",
              },
            },
          },
        ],
      });
    },
  },
};
</script>