VUE使用echarts实现中国地图航线动态展示

2023-11-03 05:57| 来源: 网络整理| 查看: 265

由于echarts4以上版本不支持中国地图，所以需要下载一下china.json文件到自己的项目中，可在我的github上下载，地址：https://github.com/LuXiaoNa/chinaMap.git

在vue项目中实现代码如下：

import * as echarts from "echarts"; //使用echarts5.0以上的版本不支持地图，需要引入china.json import dataJson from "@/utils/china.json"; //引入china.json export default { name: "map", props: { //该文件是子组件，父组件引用传值即可 chartData: { type: Array, default: () => [], required: true, }, }, watch: { chartData: { deep: true, handler(val) { echarts.registerMap("china", dataJson); //注册地图范围选择器 this.chart = echarts.init(this.$refs.mapEcharts); window.onresize = this.chart.resize; //如果容器变大小，自适应从新构图 this.setOptions(val); }, }, }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, data() { return { chart: null, }; }, methods: { setOptions(data = []) { this.chart.setOption({ tooltip: { //触摸地图悬浮显示的内容样式 triggerOn: "mousemove", //mousemove、click padding: 8, borderWidth: 1, borderColor: "#409eff", backgroundColor: "rgba(255,255,255,0.7)", textStyle: { color: "#000000", fontSize: 13, }, }, geo: { // 地理坐标系组件,支持在地理坐标系上绘制散点图、线图 map: "china", aspectScale: 0.75, zoom: 1.19, //地图的显示大小 label: { //地图上的文字 show: true, textStyle: { color: "#ABB4C2", }, }, roam: true /*是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启*/, itemStyle: { /*地图区域的多边形图形样式*/ normal: { areaColor: { // 地图区域的颜色 type: "radial", // 径向渐变 x: 0.2, // 圆心 x,y y: 0.6, r: 0.6, // 半径 colorStops: [ { offset: 0, color: "#083d6b", // 0% 处的颜色 }, { offset: 1, color: "#0c1620", // 100% 处的颜色 }, ], globalCoord: false, // 缺省为 false }, borderColor: "rgba(147, 235, 248, 0.5)", // 图形的描边颜色 borderWidth: 1, // 描边宽度 0表示无描边 shadowColor: "rgba(128, 217, 248, 0.5)", // 阴影颜色 shadowOffsetX: -1 /*阴影水平方向上的偏移距离。*/, shadowOffsetY: 1 /*阴影垂直方向上的偏移距离。*/, shadowBlur: 5, // 图形阴影的模糊大小 }, emphasis: { areaColor: "#073458", //触摸区域的背景颜色 borderWidth: 0, }, }, }, series: [ // 地图的线路图动画效果相关设置 { type: "lines", zlevel: 1, effect: { show: true, period: 15, //特效动画的时间，单位为 s。 trailLength: 0, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长 scale: 0, //波纹圆环最大限制，值越大波纹越大 ,重要，否则显示越来越多 symbol: "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z", //线上的飞机图标，可直接复制使用 symbolSize: 15, //图标的大小 }, lineStyle: { normal: { color: "#839b52", width: 2, //尾迹航线宽度 opacity: 0.4, curveness: 0.2, //线的弯曲度 }, }, data: data, }, ], }); }, }, };

其中数据结构是有地点的经纬度构成的三维数据，如下所示：

[[[113.811,22.639],[ 119.125,33.791]],[[118.128, 24.544],[ 119.125, 33.791]]]

实现效果如下图所示：

【本文地址】

公司简介

联系我们