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

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

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

<template><div><div ref="mapEcharts" style="height: 420px; width: 680px"></div></div>
</template>
<script>
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、clickpadding: 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,yy: 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, },],});},},
};
</script>

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

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

实现效果如下图所示：

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

vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
vue - vue使用echarts实现中国地图和点击省份进行查看
文章目录 1,实现的效果和功能 2,安装ECharts 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中 ...
vue集成echarts 绘制中国地图
最近项目遇见了需要以中国地图展示的需求了解到 echarts 是一个很好用的图表展示工具 ,但发现官网没有关于中国地图的组件,经过了解,echarts 5.0以上将中国地图去掉了,需要用到chi ...
vue 引入echarts画中国地图 Map china not exists
现象:在vue里用echarts画地图时报错:Map china not exists. 只出现了南海诸岛部分原因:没引入地图数据解决: import 'echarts/map/js/china. ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
Ant Design Charts绘制中国地图并动态添加标记点
绘制中国地图并动态添加标记点,在这里使用的是antd charts绘制,需要求只显示中国地图,并且跟踪物流信息使用组件地址: 图表 - Plot | Ant Design Charts 这里的引入方 ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
echarts：中国地图实现
安装 npm install echarts --save 把chinaMap对应的js文件放到echarts目录下面,保证引用路径的正确性. 直接用npm install的map文件似乎用不了,可以 ...

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

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

最新文章

热门文章