vue中使用echarts和百度地图实现飞机迁徙图
2024-04-01 01:40:39
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图，当然也可以实现其他效果。
1. 准备
项目安装echarts
在已经生成的vue项目根目录npm install echarts -S百度地图api平台申请百度地图ak
地址
2. 开始
2.1 加入百度地图api
首先我们在public/inde.html head中引入百度地图api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的ak"></script>2.2 引入echarts及其他文件
在我们需要绘制迁徙图的组件引入以下文件
import echarts from "echarts";
require("echarts/extension/bmap/bmap");
require("echarts/map/js/china.js");
以下是完整代码：
<template><div class="home"><div id="map-chart"></div></div>
</template>
<script>
// @ is an alias to /src
// import BMap from "BMap";
import echarts from "echarts";
require("echarts/extension/bmap/bmap");
require("echarts/map/js/china.js");
export default {name: "Home",components: {},data() {return {chart: null,geoCoordMap: {上海: [121.4648, 31.2891],东莞: [113.8953, 22.901],东营: [118.7073, 37.5513],中山: [113.4229, 22.478],临汾: [111.4783, 36.1615],临沂: [118.3118, 35.2936],丹东: [124.541, 40.4242],丽水: [119.5642, 28.1854],乌鲁木齐: [87.9236, 43.5883],佛山: [112.8955, 23.1097],保定: [115.0488, 39.0948],兰州: [103.5901, 36.3043],包头: [110.3467, 41.4899],北京: [116.4551, 40.2539],北海: [109.314, 21.6211],南京: [118.8062, 31.9208],南宁: [108.479, 23.1152],南昌: [116.0046, 28.6633],南通: [121.1023, 32.1625],厦门: [118.1689, 24.6478],台州: [121.1353, 28.6688],合肥: [117.29, 32.0581],呼和浩特: [111.4124, 40.4901],咸阳: [108.4131, 34.8706],哈尔滨: [127.9688, 45.368],唐山: [118.4766, 39.6826],嘉兴: [120.9155, 30.6354],大同: [113.7854, 39.8035],大连: [122.2229, 39.4409],天津: [117.4219, 39.4189],太原: [112.3352, 37.9413],威海: [121.9482, 37.1393],宁波: [121.5967, 29.6466],宝鸡: [107.1826, 34.3433],宿迁: [118.5535, 33.7775],常州: [119.4543, 31.5582],广州: [113.5107, 23.2196],廊坊: [116.521, 39.0509],延安: [109.1052, 36.4252],张家口: [115.1477, 40.8527],徐州: [117.5208, 34.3268],德州: [116.6858, 37.2107],惠州: [114.6204, 23.1647],成都: [103.9526, 30.7617],扬州: [119.4653, 32.8162],承德: [117.5757, 41.4075],拉萨: [91.1865, 30.1465],无锡: [120.3442, 31.5527],日照: [119.2786, 35.5023],昆明: [102.9199, 25.4663],杭州: [119.5313, 29.8773],枣庄: [117.323, 34.8926],柳州: [109.3799, 24.9774],株洲: [113.5327, 27.0319],武汉: [114.3896, 30.6628],汕头: [117.1692, 23.3405],江门: [112.6318, 22.1484],沈阳: [123.1238, 42.1216],沧州: [116.8286, 38.2104],河源: [114.917, 23.9722],泉州: [118.3228, 25.1147],泰安: [117.0264, 36.0516],泰州: [120.0586, 32.5525],济南: [117.1582, 36.8701],济宁: [116.8286, 35.3375],海口: [110.3893, 19.8516],淄博: [118.0371, 36.6064],淮安: [118.927, 33.4039],深圳: [114.5435, 22.5439],清远: [112.9175, 24.3292],温州: [120.498, 27.8119],渭南: [109.7864, 35.0299],湖州: [119.8608, 30.7782],湘潭: [112.5439, 27.7075],滨州: [117.8174, 37.4963],潍坊: [119.0918, 36.524],烟台: [120.7397, 37.5128],玉溪: [101.9312, 23.8898],珠海: [113.7305, 22.1155],盐城: [120.2234, 33.5577],盘锦: [121.9482, 41.0449],石家庄: [114.4995, 38.1006],福州: [119.4543, 25.9222],秦皇岛: [119.2126, 40.0232],绍兴: [120.564, 29.7565],聊城: [115.9167, 36.4032],肇庆: [112.1265, 23.5822],舟山: [122.2559, 30.2234],苏州: [120.6519, 31.3989],莱芜: [117.6526, 36.2714],菏泽: [115.6201, 35.2057],营口: [122.4316, 40.4297],葫芦岛: [120.1575, 40.578],衡水: [115.8838, 37.7161],衢州: [118.6853, 28.8666],西宁: [101.4038, 36.8207],西安: [109.1162, 34.2004],贵阳: [106.6992, 26.7682],连云港: [119.1248, 34.552],邢台: [114.8071, 37.2821],邯郸: [114.4775, 36.535],郑州: [113.4668, 34.6234],鄂尔多斯: [108.9734, 39.2487],重庆: [107.7539, 30.1904],金华: [120.0037, 29.1028],铜川: [109.0393, 35.1947],银川: [106.3586, 38.1775],镇江: [119.4763, 31.9702],长春: [125.8154, 44.2584],长沙: [113.0823, 28.2568],长治: [112.8625, 36.4746],阳泉: [113.4778, 38.0951],青岛: [120.4651, 36.3373],韶关: [113.7964, 24.7028]}};},mounted() {this.initChart();},methods: {initChart() {const BJData = [[{ name: "北京" }, { name: "上海", value: 95 }],[{ name: "北京" }, { name: "广州", value: 90 }],[{ name: "北京" }, { name: "大连", value: 80 }],[{ name: "北京" }, { name: "南宁", value: 70 }],[{ name: "北京" }, { name: "南昌", value: 60 }],[{ name: "北京" }, { name: "拉萨", value: 50 }],[{ name: "北京" }, { name: "长春", value: 40 }],[{ name: "北京" }, { name: "包头", value: 30 }],[{ name: "北京" }, { name: "重庆", value: 20 }],[{ name: "北京" }, { name: "常州", value: 10 }]];const SHData = [[{ name: "上海" }, { name: "包头", value: 95 }],[{ name: "上海" }, { name: "昆明", value: 90 }],[{ name: "上海" }, { name: "广州", value: 80 }],[{ name: "上海" }, { name: "郑州", value: 70 }],[{ name: "上海" }, { name: "长春", value: 60 }],[{ name: "上海" }, { name: "重庆", value: 50 }],[{ name: "上海" }, { name: "长沙", value: 40 }],[{ name: "上海" }, { name: "北京", value: 30 }],[{ name: "上海" }, { name: "丹东", value: 20 }],[{ name: "上海" }, { name: "大连", value: 10 }]];const GZData = [[{ name: "广州" }, { name: "福州", value: 95 }],[{ name: "广州" }, { name: "太原", value: 90 }],[{ name: "广州" }, { name: "长春", value: 80 }],[{ name: "广州" }, { name: "重庆", value: 70 }],[{ name: "广州" }, { name: "西安", value: 60 }],[{ name: "广州" }, { name: "成都", value: 50 }],[{ name: "广州" }, { name: "常州", value: 40 }],[{ name: "广州" }, { name: "北京", value: 30 }],[{ name: "广州" }, { name: "北海", value: 20 }],[{ name: "广州" }, { name: "海口", value: 10 }]];const color = ["#a6c84c", "#ffa022", "#46bee9"];const planePath ="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";const series = [];[["北京", BJData],["上海", SHData],["广州", GZData]].forEach((item, i) => {series.push({name: item[0] + " Top10",type: "lines",zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: "#fff",symbolSize: 3},lineStyle: {normal: {color: color[i],width: 0,curveness: 0.2}},data: this.convertData(item[1])},{name: item[0] + " Top10",type: "lines",zlevel: 2,symbol: ["none", "arrow"],symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: planePath,symbolSize: 15},lineStyle: {normal: {color: color[i],width: 1,opacity: 0.6,curveness: 0.2}},data: this.convertData(item[1])},{name: item[0] + " Top10",type: "effectScatter",coordinateSystem: "geo",zlevel: 2,rippleEffect: {brushType: "stroke"},label: {normal: {show: true,position: "right",formatter: "{b}"}},symbolSize: function(val) {return val[2] / 8;},itemStyle: {normal: {color: color[i]}},data: item[1].map(dataItem => {return {name: dataItem[1].name,value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});const option = {backgroundColor: "#404a59",title: {text: "模拟迁徙",subtext: "数据纯属虚构",left: "center",textStyle: {color: "#fff"}},tooltip: {trigger: "item"},legend: {orient: "vertical",top: "bottom",left: "right",data: ["北京 Top10", "上海 Top10", "广州 Top10"],textStyle: {color: "#fff"},selectedMode: "single"},geo: {map: "china",label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: "#323c48",borderColor: "#404a59"},emphasis: {areaColor: "#2a333d"}}},series: series};this.chart = echarts.init(document.getElementById("map-chart"));this.chart.setOption(option);},convertData(data) {const res = [];for (let i = 0; i < data.length; i++) {const dataItem = data[i];const fromCoord = this.geoCoordMap[dataItem[0].name];const toCoord = this.geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord]});}}return res;}}
};
</script>
<style scoped>
#map-chart {width: 100%;height: 1000px;margin: 0 auto;
}
</style>
2.3 效果图
3 重点
每条路线的都有起始点，type 为 lines，然后增加effect
属性增加运动效果，一个完整的迁徙线的配置如下：
{name: "北京 ,type: 'lines',zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: "#fff",symbolSize: 3},lineStyle: {normal: {color: "#a6c84c",width: 0,curveness: 0.2}},data: [{fromName: "北京"toName: "上海"coords:['起点坐标', '结束坐标'']},...]
}vue中使用echarts和百度地图实现飞机迁徙图相关推荐
- vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的 地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...
- vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框 如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
- vue中使用Echarts渲染四川地图
第一步:先创建vue项目(此处省略,详细步骤自行查找资料) 第二步:新建终端,下载echarts相关包: 在终端执行: npm install echarts --save 第三步:下载需要的地图js ...
- vue中使用ECharts引入中国地图
坑我来踩 代码你们看 china.js 提取码:iwn9 百度网盘 请输入提取码 <template><div class="echarsMap">< ...
- vue中使用echarts绘制中国地图
首先需要一个绘制中国地图的json文件(资源还在审核,审核过后会重新贴上来) 1.首先引入echarts和json文件,在需要的地方引即可 import echarts from 'echarts'; ...
- vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
- vue中使用echarts绘制仪表盘
效果图 目录 一.安装echarts 1.控制台使用命令进行安装 2.在package.json中配置echarts 3.在main.js中引用 二.vue中使用echarts 1.首先设置一个放置图 ...
- vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
- vue + echarts + ( bmap) 百度地图 实现公交、骑行、车辆 轨迹图
vue + echarts + ( bmap) 百度地图 实现公交.骑行.车辆 轨迹图 最终目标 最终目标:个性化的实现公交路线图 先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看 码起 ...
最新文章
- 部门换届推文文字_【校安协招新】这篇推文不要标题，只要你!
- 网页设计精粹：网页中那些迷人的按钮设计
- SQL注入到EXP编写
- 不共线三点确定特征平面并求解平面系数
- https脚本调linux执行器,linux平台下一键配置网站https
- java 换行分割_用Java开发自己的Kubernetes控制器，想试试吗？
- 一只青蛙跳向三个台阶_在藏区流传的青蛙王子的故事
- 【英语学习】【WOTD】disavow 释义/词源/示例
- 文件的HANDLE转化为FILE*!!!
- 190303每日一句
- python安装包的路径
- 全链路压测及阿里全链路压测详解
- 中国石油大学《机械基础（设计与制造）》第二阶段在线作业
- AMap（地图组成与名词解释）
- java计算机毕业设计小区物业管理系统录像展示.mp4源程序+mysql+系统+lw文档+远程调试
- ST_Geometry
- windows10删除多余顽固输入法
- 关于使用google map实现周边搜索的功能
- 系统可用性SLA指标
- Chatbot项目的剖析