使用vue+highcharts绘制中国地图

下面开始介绍如何使用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中编辑地图区域 2.2在组件的script中导入highmaps以及china.js的数据   import Highcharts from '../../node_modules/highcharts/highmaps'   import MapData from '../../dist/static/js/china' 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.最终结果 因本人水平有限，难免有疏漏，发现问题直接在下方留言即可。另外，欢迎关注本人公众号「双城笔录」 公众号「双城笔录」

本文章由javascript技术分享原创和收集