效果图如下
代码如下
HTML
<div class="chartMap" ref="chinaMap"></div>JS - VUE
import "../utils/map/js/china";export default { name: "dataView", data() { return { chinaMap: "", // 地图 dataList: [ { name: "南海诸岛", value: 100, eventTotal: 100, specialImportant: 10, import: 10, compare: 10, common: 40, specail: 20, }, { name: "北京", value: 540 }, { name: "天津", value: 130 }, { name: "上海", value: 400 }, { name: "重庆", value: 750 }, { name: "河北", value: 130 }, { name: "河南", value: 830 }, { name: "云南", value: 110 }, { name: "辽宁", value: 19 }, { name: "黑龙江", value: 150 }, { name: "湖南", value: 690 }, { name: "安徽", value: 60 }, { name: "山东", value: 39 }, { name: "新疆", value: 452 }, { name: "江苏", value: 31 }, { name: "浙江", value: 104 }, { name: "江西", value: 36 }, { name: "湖北", value: 52 }, { name: "广西", value: 33 }, { name: "甘肃", value: 73 }, { name: "山西", value: 54 }, { name: "内蒙古", value: 778 }, { name: "陕西", value: 22 }, { name: "吉林", value: 44 }, { name: "福建", value: 18 }, { name: "贵州", value: 54 }, { name: "广东", value: 98 }, { name: "青海", value: 13 }, { name: "西藏", value: 0 }, { name: "四川", value: 44 }, { name: "宁夏", value: 42 }, { name: "海南", value: 22 }, { name: "台湾", value: 23 }, { name: "香港", value: 25 }, { name: "澳门", value: 555 }, ], chinaGeoCoordMap: { 黑龙江: [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], 云南: [102.9199, 25.4663], 广东: [113.12244, 23.009505], 广西: [108.479, 23.1152], 海南: [110.3893, 19.8516], 上海: [121.4648, 31.2891], }, }; }, created() {}, mounted() { this.init(); window.onresize = () => { //动静扭转图表尺寸 this.chinaMap.resize(); }; }, methods: { init() { this.getMap(); // 地图 }, // 地图 getMap() { this.chinaMap = this.$echarts.init(this.$refs.chinaMap); let option = { // 设置地图款式 geo: { map: "china", zoom: 1.2, layoutSize: "100%", //放弃地图宽高比 // 设置图块色彩，也能够通过图例 visualMap 设置色彩，然而飞线的色彩设置会生效，始终取 图例 设置的色彩；依据需要抉择； regions: this.getRegions(), label: { // 默认款式 normal: { show: true, fontSize: "14", color: "rgba(255,255,255,.3)", }, // 高亮款式 emphasis: { show: true, textStyle: { color: "#1955a4", }, }, }, itemStyle: { // 默认款式，图块没数据时，会取默认色彩 normal: { borderColor: "#c0e0e3", areaColor: "#29c5f6", opacity: 0.8, }, // 高亮款式 emphasis: { areaColor: "#f2d5ad", }, }, }, series: [ // 设置飞线款式 { type: "lines", coordinateSystem: "geo", zlevel: 100, effect: { show: true, period: 4, // 图标飞跃速度，值越小速度越快 trailLength: 0.2, // 尾迹长度[0,1]值越大，尾迹越长 symbol: "pin", // 图标类型 symbolSize: 4, // 图标大小 color: "#f5f3b3", // 图标色彩 }, lineStyle: { color: "#000", normal: { show: true, width: 1, //尾迹线条宽度 opacity: 0.1, //尾迹线条透明度 curveness: 0.3, //尾迹线条曲直度 color: "#44add00f", // 飞线色彩 }, }, // 飞线数据 data: this.getLine(this.dataList), }, // 中心点设置 { type: "effectScatter", coordinateSystem: "geo", zlevel: 15, rippleEffect: { period: 3, brushType: "fill", // 动画款式 fill stroke scale: 60, color: "#7ce7fd", number: 2, }, symbol: "circle", // 图标款式 symbolSize: 2, itemStyle: { color: "#5cc8d4", }, // 中心点数据 data: [ { name: "北京市", value: this.chinaGeoCoordMap["北京市"].concat([ 10, ]), }, ], }, ], }; this.chinaMap.setOption(option); }, // 随机配置色彩 getRegions() { let dataList = this.dataList; let arr = []; let color = [ "#3eb9e2", "#3abae0", "#377bac", "#38a0cb", "#398fbe", "#3571a3", ]; dataList.forEach((i, j) => { arr.push({ name: i.name, itemStyle: { areaColor: color[j % (color.length - 1)], }, }); }); return arr; }, // 设置飞线数据 getLine(data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = this.chinaGeoCoordMap[dataItem.name]; var toCoord = [116.4551, 40.2539]; //中心点地理坐标 if (fromCoord && toCoord) { res.push([ { // 飞线从哪里登程 coord: fromCoord, value: dataItem.value, }, { // 飞线去往哪里 coord: toCoord, }, ]); } } return res; }, },};</script>CSS
<style lang="scss">html,body,#app { background: #132d48;}</style>