1、需求：根据数据渲染航线图

1. 通过vue+echarts 实现

1. 过程中遇到bug：切换数据时，浏览器出现崩溃，原因是将echarts 实例定义在了vue的data 中

1. 需要将echarts 实例定在script标签中，定义为全局变量

<template><div class="container"><div @click="handleChangeDate()">切换日期</div><div id="echarts-map"></div></div>
</template>
<script>
import world from "@/assets/world.json";
import tradeData1 from "@/assets/libs/data1.json";
import tradeData2 from "@/assets/libs/data2.json";
import * as echarts from "echarts";
let list = [];
let myChart = null;
export default {data() {return {pointArr:[],option:{},serieslinesData:[]};},beforeMount(){ },mounted() {var chartDom = document.getElementById("echarts-map");myChart = echarts.init(chartDom);// 1号jsonlist = tradeData1this.getSerieslines()this.drawChart();},methods: {// 切换日期handleChangeDate(){// 2号jsonlist = tradeData2myChart.clear()this.getSerieslines()this.$nextTick(()=>{this.option.series = this.serieslinesData;myChart.setOption(this.option,true);})},// 处理数据getSerieslines() {let res = [];list.forEach((item) => {this.pointArr.push({ value: item.source, },{ value: item.target,});res.push(this.getPontLine(item.flightNumber, [item.source, item.target]));res.push(this.getPoint())});this.serieslinesData = res;},// init chartdrawChart() {// 画背景echarts.registerMap("world", world);this.option = {backgroundColor: "#000", //背景色geo: {id: "world",map: "world",// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启roam: false,// 图形上的文本标签label: {show: false, // 是否显示对应地名},zoom: 1,// 地图区域的多边形 图形样式itemStyle: {borderWidth: 0.5, // 描边线宽 为 0 时无描边normal: {areaColor: "#29323c", //地图前景色borderColor: "#29323c", // 国界边框色},},legend: {selectedMode: false,},// 高亮状态下的多边形和标签样式emphasis: {label: {show: false, // 是否显示标签color: "#29323c", // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色},itemStyle: {areaColor: "#29323c", // 地图悬浮颜色},lineStyle: {color: ''}},// 自定义地区的名称映射nameMap: name,// 地图系列中的数据内容数组 数组项可以为单个数值},series: this.serieslinesData,tooltip: {trigger: "item",show: false},};myChart.clear();myChart.setOption(this.option,true);},getPoint() {return {type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 4,label: {formatter: "{b}",position: "bottom",color: "#fff",fontSize: 12,distance: 10,show: true,},symbol: "circle",symbolSize: 3,itemStyle: {color: "rgb(22,255,255, 1)",// color: "#9F98FA",opacity: 1,},silent: true,data: this.pointArr,}},getPontLine(flightNumber, coords, color = "", width = 1) {return {name: flightNumber,type: "lines", //  飞行的路径线zlevel: 1,large: true,effect: {//  尾迹特效 需要单独 放在一个层show: true,period: 3, // 动画时间  -- 设置后 同时到达// constantSpeed:50,//配置特效图形的移动动画是否是固定速度，单位像素/秒，设置为大于 0 的值后会忽略 period 配置项trailLength: 0, // 特效尾迹的长度color: "#fff",symbolSize: 3,},blendMode: 'lighter',lineStyle: {normal: {color,width,curveness: 0.17, // 边的 曲度},emphasis: {color,}},data: [{fromName: "",toName: "",coords,},],}},},
};
</script><style lang="scss" scoped>
.container {height: 100%;width: 100%;
}#echarts-map {background-color: #333333;height: 100%;width: 100%;
}
</style>