echarts地图动画和java_基于echarts实现3D地图的定时高亮和点击事件

技术选型

文章所选技术栈：vue、echarts、echarts-gl

安装Vue和echarts

1、安装echarts和echarts-al

npm i echarts --save npm i echarts-gl --save

2、引用echarts和echarts-gl

import echarts from 'echarts';

import 'echarts-gl'

Vue.prototype.$echarts = echarts

3、页面引入

require('../../node_modules/echarts/map/js/china')

此时地图消息就在你的node_modules/echarts/map/china中

初始化echarts-gl 3D地图

1、新建一个option.js 这个文件是用来放配置项的，不建立也可以，但是页面代码多会不不美观

2、配置页代码如下 (主要是地点标识和3D地图的颜色样式)

//标识数据,用来标识地图上的点，给用户提供点击事件

var geoCoordMap = {

'黑龙江': [127.9688, 45.368],

'内蒙古': [110.3467, 41.4899],

"吉林": [125.8154, 44.2584],

'北京市': [116.4551, 40.2539],

"辽宁": [123.1238, 42.1216],

"河北": [114.4995, 38.1006],

"天津": [117.4219, 39.4189],

"山西": [112.3352, 37.9413],

"陕西": [109.1162, 34.2004],

"甘肃": [103.5901, 36.3043],

"宁夏": [106.3586, 38.1775],

"青海": [101.4038, 36.8207],

"新疆": [87.9236, 43.5883],

"西藏": [91.11, 29.97],

"四川": [103.9526, 30.7617],

"重庆": [108.384366, 30.439702],

"山东": [117.1582, 36.8701],

"河南": [113.4668, 34.6234],

"江苏": [118.8062, 31.9208],

"安徽": [117.29, 32.0581],

"湖北": [114.3896, 30.6628],

"浙江": [119.5313, 29.8773],

"福建": [119.4543, 25.9222],

"江西": [116.0046, 28.6633],

"湖南": [113.0823, 28.2568],

"贵州": [106.6992, 26.7682],

"云