使用vue echarts世界地图航线路线

这是一个vue结合echarts做的船舶轨迹运行线路图；

一、安装echarts
npm install echarts
二、全局引入
在全局引入，需要在main.js文件中，引入echarts。
import echarts from 'echarts
Vue.prototype.$echarts = echar
三、charts世界地图航线路线
1：创建一个vue文件；

<template>
  <div style="width: 100%; height: 100%">
    <div :id="echarts" class="map"></div>
  </div>
</template>

<script>
// 引入世界地图json文件
import world from "@/option/map/world.json";
export default {
	data(){
		  myChart: null,
	}, 
}
</script>

2：初始化加载地图；

computed: {
    echarts() {
      return "echarts" + Math.random() * 100000;
    },
  },
  mounted() {
    this.initMap();
  }, 

 methods: {
 	initMap() {
      let series = [];
      this.mapData.mapCoordsItems.forEach((item, index) => { 
        series.push({
          name: "航线图",
          zlevel: index === 0 ? 0 : index === 1 ? 1 : 2, //zleve控制图标的分层
          type: "lines",
          smooth: true,
          coordinateSystem: "geo",
          geoIndex: 0,
          polyline: true,
          lineStyle: {
            curveness: 0.2, //控制线条的弯曲度
            color: item.color, //不同的起点显示不同的线条样式
            width: 5,
            opacity: 1,
          },

          label: {
            position: "top",
            // color: "#fff",
          },
          z: 100,
          markPoint: {
            itemStyle: {
              normal: {
                borderColor: "#f56c6c",
                borderWidth: 10,
              },
            },

            symbolSize: 15,
            label: {
              position: "top",
              color: "#fff",
            },
            data: this.mapData.coordinateData,
          },
          emphasis: {
            focus: "self",
          },
          itemStyle: {
            normal: {
              color: "red", //颜色
            },
            emphasis: {
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          data: [
            {
              fromname: item.fromName,
              toname: item.toName,
              coords: item.coords,
              value: item.eeoi,
            },
          ],
        });
      });

      this.myChart = this.$echarts.init(document.getElementById(this.echarts));
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", function () {
        this.myChart.resize();
      });
      this.$echarts.registerMap("world", world);

      var option = {
        geo: {
          map: "world", //导入的china.js，该文件中注册的china地图。
          zoom: 1.2, //默认显示的缩放倍数
          roam: "scale", //禁止拖拽

          //板块的颜色
          itemStyle: {
            areaColor: "#f2f5ea", //每个板块的颜色
            borderColor: "#196fa8", //板块的边界颜色
          },
          //鼠标移入某板块的样式设置
          emphasis: {
            //移入该板块时的板块颜色
            itemStyle: {
              areaColor: "#196fa8",
            },
            //省份的名称颜色
            label: {
              color: "white",
            },
          },
        },
        series: series, //显示的数据

        //鼠标hover到航线上显示数据
        tooltip: {
          trigger: "item",
          show: true,
          showDelay: 0, //显示延时，添加显示延时可以避免频繁切换
          hideDelay: 50, //隐藏延时
          transitionDuration: 0, //动画变换时长
          formatter: function (data) {
            if (data.data.fromname == undefined) {
              return;
            }
            //返回该航线的数据
            return (
              data.data.fromname +
              "<<<>>>" +
              data.data.toname +
              "<br />" +
              "排放量：" +
              data.data.value
            );
          },
        },
      };
    
      this.myChart.setOption(option, true);
    },
}

3：用于返回起点名字、终点名字、起点坐标、终点坐标

   returnFromToCoords(data) {
      let result = [];
      for (let i = 0; i < data.length; i++) { 
        result.push({
          fromname: data[i].fromName,
          toname: data[i].toName,
          coords: data[i].coords,
          value: data[i].value,
        });
      }
      return result;
    },

5：返回航线的颜色：三种颜色

 returnColor(index) {
      return index === 0 ? "#6beef4" : index === 1 ? "#ecc021" : "#73fa3b";
    },

6：销毁地图；

beforeDestroy() {
    this.$echarts.dispose(this.initMap);
  },

地图json文件可以找度娘下载！！！！