下面开始介绍如何使用vue+highcharts来绘制中国地图。

---

一、工具

前端框架：vue的2.5版本，官网地址为https://cn.vuejs.org/；

图表库：highcharts的7.1版本，官网地址为https://www.highcharts.com/，官网中文地址为https://www.highcharts.com.cn/；

中国地图数据：china.js，数据地址为https://data.jianshukeji.com/geochina/china.js

注 :安装vue及highcharts的方法详见官网。

---

二、编辑代码

1. 编辑china.js

使用export default将china.js中的JSON数据默认导出，方便后面的组件引用.

2.编辑vue组件

2.1 新建vue组件，在组件的template中编辑地图区域

<template>

    <div id="mapId1">

    </div>

</template>

<script>

    export default {

        name: "map"

    }

</script>

<style scoped>

</style>

2.2在组件的script中导入highmaps以及china.js的数据

</script>

  import Highcharts from '../../node_modules/highcharts/highmaps'

  import MapData from '../../dist/static/js/china'

<style scoped>

</style>

2.3编辑图例数据data(用来标注每个省份的颜色)

let data = [{'name': '北京', 'value': 5}, {'name': '天津', 'value': 4}, {'name': '河北', 'value': 3}, {

    'name': '山西',

    'value': 1

  }, {'name': '内蒙古', 'value': 2}, {'name': '辽宁', 'value': 3}, {'name': '吉林', 'value': 3}, {

    'name': '黑龙江',

    'value': 2

  }, {'name': '上海', 'value': 5}, {'name': '江苏', 'value': 4}, {'name': '浙江', 'value': 4}, {

    'name': '安徽',

    'value': 1

  }, {'name': '福建', 'value': 1}, {'name': '江西', 'value': 5}, {'name': '山东', 'value': 2}, {

    'name': '河南',

    'value': 1

  }, {'name': '湖北', 'value': 2}, {'name': '湖南', 'value': 3}, {'name': '广东', 'value': 5}, {

    'name': '广西',

    'value': 4

  }, {'name': '海南', 'value': 6}, {'name': '重庆', 'value': 3}, {'name': '四川', 'value': 5}, {

    'name': '贵州',

    'value': 4

  }, {'name': '云南', 'value': 4}, {'name': '西藏', 'value': 0}, {'name': '陕西', 'value': 1}, {

    'name': '甘肃',

    'value': 2

  }, {'name': '青海', 'value': 4}, {'name': '宁夏', 'value': 2}, {'name': '新疆', 'value': 5}, {

    'name': '台湾',

    'value': 1

  }, {'name': '香港', 'value': 1}, {'name': '澳门', 'value': 4}, {'name': '南海诸岛', 'value': 5}, {

    'name': '南海诸岛',

    'value': 5

  }];

2.4编辑加载方法showChineseMap()

3.最终结果

---

因本人水平有限，难免有疏漏，发现问题直接在下方留言即可。