在Web开发中，数据可视化越来越受到重视。本文将带领大家了解如何在Vue项目中使用ECharts实现动态航线图，如下图：让你的数据展示更加生动有趣。
一、准备工作
1、安装ECharts
在项目根目录下，运行以下命令安装ECharts：
npm install echarts --save
二、引入ECharts
1、全局引入
在项目的入口文件（main.js）中，引入ECharts并挂载到Vue原型上：
import Vue from 'vue'
import ECharts from 'echarts'Vue.prototype.$echarts = ECharts
2、局部引入
在需要使用ECharts的组件中，按需引入：
import ECharts from 'echarts'
三、实现动态航线图
1、数据准备
下载需要展示的地图geoJson文件，有很多地方可以下载，我是在这里下载的：https://hxkj.vip/demo/echartsMap/
2、注册地图
const chinaMap = {你的map Json数据，可使用import引入}
const chinaMapOutline = {你的map Json数据，可使用import引入}
Echarts.registerMap('chinaMap', chinaMap);
Echarts.registerMap('chinaMapOutline', chinaMapOutline);
3、配置option
以甘肃为例，配置option
var chinaGeoCoordMap = {'嘉峪关市': [98.277304,39.786529],'金昌市': [102.187888,38.514238],"兰州市": [103.823557,36.058039],'天水市':[105.724998,34.578529],"张掖市": [100.455472,38.932897],"平凉市": [106.684691,35.54279],"武威市": [102.634697,37.929996],"白银市": [104.173606,36.54568],"庆阳市": [107.638372,35.734218],"甘南藏族自治州": [102.911008,34.986354],"临夏回族自治州": [103.212006,35.599446],"定西市": [104.626294,35.579578],"陇南市": [104.929379,33.388598],"酒泉市": [96.063265,40.283136],};var chinaDatas = [[{name: '兰州市',value: 0}], [{name: '天水市',value: 0}], [{name: '金昌市',value: 0}], [{name: '陇南市',value: 0}], [{name: '甘南藏族自治州',value: 0}], [{name: '临夏回族自治州',value: 0}], [{name: '白银市',value: 0}], [{name: '庆阳市',value: 0}], [{name: '定西市',value: 0}]];var convertData = function(data) {var res = [];for(var i = 0; i < data.length; i++) {var dataItem = data[i];var toCoord = chinaGeoCoordMap[dataItem[0].name];var fromCoord = [103.823557,36.058039];if(fromCoord && toCoord) {res.push([ {coord: toCoord,},{coord: fromCoord,value: dataItem[0].value}]);}}return res;};var series = [{map: 'chinaMap',type: 'map',zoom:1,label: {normal: {show: false,textStyle: {color: '#fff'}},emphasis: {textStyle: {color: '#fff'}}},top: '16%',tooltip:{show:false},roam: false,itemStyle: {normal: {areaColor:'transparent',borderColor: 'rgba(0,255,255,.1)',borderWidth: 1,},emphasis: {areaColor:'rgba(0,255,255,.1)',textStyle: {color: 'red'}}}}, ];[['兰州市', chinaDatas]].forEach(function(item, i) {series.push({type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 5, //图标大小},lineStyle: {normal: {width: 1, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: .3 //尾迹线条曲直度}},data: convertData(item[1])}, {type: 'scatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: { //涟漪特效period: 4, //动画时间，值越小速度越快brushType: 'stroke', //波纹绘制方式 stroke, fillscale: 4 //波纹圆环最大限制，值越大波纹越大},label: {normal: {show: false,position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: function(params){//圆环显示文字return params.data.name;},fontSize: 13},emphasis: {show: true}},symbol: 'circle',symbolSize: function(val) {return 10; //圆环大小},itemStyle: {normal: {show: false,color: 'yellow'}},data: item[1].map(function(dataItem) {return {name: dataItem[0].name,value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])};}),});});option = {backgroundColor:'#181F4E',color:['yellow'],geo: {silent: true,map: 'chinaMapOutline',zoom: 1,top: '16%',label: {normal: {show: false,textStyle: {color: '#fff'}},emphasis: {textStyle: {color: '#fff'}}},roam: false,itemStyle: {normal: {areaColor: 'rgba(0,255,255,.02)',borderColor: '#00ffff',borderWidth: 1.5,shadowColor: '#00ffff',shadowOffsetX: 0,shadowOffsetY: 4,shadowBlur: 10,},emphasis: {areaColor: 'transparent', //悬浮背景textStyle: {color: '#fff'}}}},series:series
}4、设置option
html:
<template><div ref="mapChart" style="width: 100%; height: 500px;"></div>
</template>js:
const chart = Echarts.init(this.$refs.mapChart);chart.setOption(option);
