使用 Vue+Highcharts 绘制中国地图

 关注

发布于: 2020 年 04 月 30 日

Vue是当前最主流的前端框架之一，Highcharts是图表类型丰富、方便快捷的 HTML5 交互性图表库，通过这两者的结合可以做很多有意思的小实验。
下面尝试使用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
编辑代码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()
﻿
最终结果把上述代码运行起来后一副中国地图就完成了：)
﻿