vue中利用echarts写一个飞机行径图

qq_51538602

已于 2022-12-15 15:53:52 修改

阅读量874

点赞数

分类专栏： vue echarts 文章标签： echarts vue.js 前端

于 2022-12-12 14:38:59 首次发布

本文链接：https://blog.csdn.net/qq_51538602/article/details/128286679

版权

vue 同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

先写一个盒子盛放地图

后面改进的图

<div class="com-container">
   <div class="com-chart" id="chart"></div>
</div>

样式

<style lang="less" scoped>
.com-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.com-chart {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

canvas {
  border-radius: 20px;
}

.com-container {
  position: relative;
}
</style>

这是多条路径图

<script>
import pool from "@/components/components/pool/index";
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import "echarts/map/js/china.js";
import { getSavMap, getSav } from "@/api/company";
export default {
  components: { pool },
  data() {
    return {
      SHData: [],
      geoCoordMap: {},
      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",
      list: {},
      activeName: "first",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 拿到行径数据
    getList() {
      getSavMap().then((res) => {
        if (res.code == 200) {
          var items = [];
          items = res.data;
          for (var i = 0; i < items.length; i++) {
            if (items[i].lng) {
              this.SHData.push([
                { name: items[i].areaName },
                {
                  name: items[i].comeArea,
                  value: 50,
                  num: items[i].num,
                },
              ]);
              // 出发地合集
              var area = {};
              var lns = [];
              lns.push(items[i].areaLng, items[i].areaLat);
              area[items[i].comeArea] = lns;
              var twoobj = Object.assign(this.geoCoordMap, area);
              // 目的地合集
              var comArea = {};
              var lngs = [];
              lngs.push(items[i].lng, items[i].lat);
              comArea[items[i].areaName] = lngs;
              var twoobjt = Object.assign(twoobj, comArea);
              // 全部放在地址经纬度这个数组内
              this.geoCoordMap = twoobjt;
            }
          }
          this.createLine(this.loca());
        }
      });
      // 拿到返乡数据
      getSav().then((res) => {
        if (res.code == 200) {
          this.list = res.data;
        }
      });
    },
    loca() {
      let series = [];
      [["东莞", this.SHData]].forEach((item, i) => {
        series.push(
          {
            type: "lines", //用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
            zlevel: 1,
            effect: {
              //线特效的配置
              show: true,
              period: 6, //特效动画的时间
              trailLength: 0.7, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
              color: "#fff",
              symbolSize: 3, //特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
            },
            lineStyle: {
              normal: {
                color: "#fc1f1f",
                width: 0, //线条粗细
                curveness: 0.2, //边的曲度，支持从 0 到 1 的值，值越大曲度越大
              },
            },
            data: this.convertData(item[1]), //线数据集。
          },
          {
            type: "lines",
            zlevel: 2,
            symbol: ["none", "circle"], //线两端的标记类型，可以是一个数组分别指定两端
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              // symbol: this.planePath,//飞机
              symbolSize: 2, //飞机大小
            },
            lineStyle: {
              //轨迹渐变色
              // color: "#46bee9",
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#343bf5", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffbb69", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              width: 1,
              opacity: 0.6,
              curveness: 0.2,
            },
            data: this.convertData(item[1]),
          },
          {
            type: "effectScatter", //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
            coordinateSystem: "geo", //该系列使用的坐标系
            zlevel: 2,
            // legendHoverLink: true,
            // showEffectOn: "emphasis", //鼠标移到终点再显示涟漪
            rippleEffect: {
              //涟漪特效相关配置
              brushType: "stroke",
              scale: 10,
              numer: 4,
              period: 4,
            },
            label: {
              //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
              show: true,
              position: "right",
              formatter: "{b}",
              // formatter: "{@value}",
              fontSize: "10",
            },
            symbolSize: function (val) {
              //标记的大小
              return val[2] / 8;
            },
            itemStyle: {
              color: "#ffffff",
            },
            data: item[1].map((dataItem) => {
              return {
                name: dataItem[1].name,
                value: this.geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value,
                ]), //控制涟漪是否有  数值太小没有涟漪
                num: this.geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].num, //实际数量
                ]),
              };
            }),
          }
        );
      });
      return series;
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = this.geoCoordMap[dataItem[0].name]; //始发地
        var toCoord = this.geoCoordMap[dataItem[1].name]; //目的地
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord], //一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
          });
        }
      }
      return res;
    },

    createLine(seriesData) {
      let mychart = echarts.init(document.getElementById("chart"));
      mychart.setOption({
        backgroundColor: "#404a59", //设置整体背景色
        title: {
          //标题设置
          text: "",
          left: "center",
          textStyle: {
            color: "#fff",
            fontFamily: "Monospace",
            fontWeight: "lighter",
          },
        },
        geo: {
          //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          map: "china", //配置中国地图
          zoom: 2, //地图缩放
          center: [110.479919, 29.127401], //将张家界设为缩放中心
          label: {
            show: true,
            color: "#ffffff", //省份标注颜色
          }, //显示省份
          roam: true, //是否开启鼠标缩放和平移漫游
          itemStyle: {
            areaColor: "#323c48", //设置区域颜色
            borderColor: "#111111", //设置各各省市边界颜色
          },
          emphasis: {
            show: true,
            itemStyle: {
              areaColor: "#2a333d",
            },
            label: {
              color: "#FFFFFF", //hover高亮状态下字体颜色
            },
          },
        },
        series: seriesData,
        //航线的显示
        tooltip: {
          show: true,
          formatter: function (data) {
            //返回该航线的数据
            if (data.data.fromName) {
              return (
                data.data.fromName + " 至 " + data.data.toName
                //+ "：" +
                // data.data.coords
              );
            } else {
              return data.data.name + " : " + data.data.num[2];
            }
          },
        },
      });
    },
  },
};
</script>

始发地一个向多个目的地的，如下

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import "echarts/map/js/china.js";
import AMapLoader from "@amap/amap-jsapi-loader"; //引入地图api
import { getSavMap } from "@/api/company";
export default {
  data() {
    return {
      SHData: [],
      geoCoordMap: {
        东莞: [113.75179, 23.02067],
      },
      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",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 拿到行径数据
    getList() {
      getSavMap().then((res) => {
        if (res.code == 200) {
          var items = [];
          items = res.data;
          for (var i = 0; i < items.length; i++) {
            if (items[i].lng) {
              this.SHData.push([
                { name: "东莞" },
                { name: items[i].comeArea, value: 1 },
              ]);
              var area = {};
              var lns = [];
              lns.push(items[i].lng, items[i].lat);
              area[items[i].comeArea] = lns;
              var twoobj = Object.assign(this.geoCoordMap, area);
              this.geoCoordMap = twoobj;
            }
          }
          // console.log(this.SHData, "this.SHData");
          this.createLine(this.loca());
        }
      });
    },
    loca() {
      let series = [];
      [["东莞", this.SHData]].forEach((item, i) => {
        //console.log(item[1]);//得到上海数组
        series.push(
          {
            type: "lines", //用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
            zlevel: 1,
            effect: {
              //线特效的配置
              show: true,
              period: 6, //特效动画的时间
              trailLength: 0.7, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
              color: "#fff",
              symbolSize: 3, //特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
            },
            lineStyle: {
              normal: {
                color: "#46bee9",
                width: 0,
                curveness: 0.2, //边的曲度，支持从 0 到 1 的值，值越大曲度越大
              },
            },
            data: this.convertData(item[1]), //线数据集。
          },
          {
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"], //线两端的标记类型，可以是一个数组分别指定两端
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: this.planePath,
              symbolSize: 15,
            },
            lineStyle: {
              color: "#46bee9",
              width: 1,
              opacity: 0.6,
              curveness: 0.2,
            },
            data: this.convertData(item[1]),
          },
          {
            type: "effectScatter", //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
            coordinateSystem: "geo", //该系列使用的坐标系
            zlevel: 2,
            rippleEffect: {
              //涟漪特效相关配置
              brushType: "stroke",
            },
            label: {
              //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
              show: true,
              position: "right",
              formatter: "{b}",
            },
            symbolSize: function (val) {
              //标记的大小
              return val[2] / 8;
            },
            itemStyle: {
              color: "#46bee9",
            },
            data: item[1].map((dataItem) => {
              console.log(dataItem, "dataItem看");
              return {
                name: dataItem[1].name,
                // value:""
                value: this.geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value,
                ]),
              };
            }),
          }
        );
      });
      return series;
    },
    convertData(data) {
      var res = [];
      //console.log(data.length);长度为10
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = this.geoCoordMap[dataItem[0].name]; //始发地
        var toCoord = this.geoCoordMap[dataItem[1].name]; //目的地
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord], //一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
          });
        }
      }
      return res;
    },

    createLine(seriesData) {
      let mychart = echarts.init(document.getElementById("chart"));
      mychart.setOption({
        backgroundColor: "#404a59", //设置整体背景色
        title: {
          //标题设置
          text: "",
          left: "center",
          textStyle: {
            color: "#fff",
            fontFamily: "Monospace",
            fontWeight: "lighter",
          },
        },
        geo: {
          //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          map: "china", //配置中国地图
          label: { show: true }, //显示省份
          roam: true, //是否开启鼠标缩放和平移漫游
          itemStyle: {
            areaColor: "#323c48", //设置区域颜色
            borderColor: "#404a59", //设置各各省市边界颜色
          },
          emphasis: {
            show: true,
            itemStyle: {
              areaColor: "#2a333d",
            },
          },
        },
        series: seriesData,
      });
    },
  },
};
</script>