Echarts地球

会说法语的猪

已于 2022-11-04 17:26:22 修改

阅读量2.3k

点赞数 1

分类专栏： vue 数据可视化 3D 文章标签： echarts 前端 vue.js

于 2022-11-04 17:23:09 首次发布

本文链接：https://blog.csdn.net/m0_51431448/article/details/127692787

版权

vue 同时被 3 个专栏收录

73 篇文章 4 订阅

订阅专栏

数据可视化

20 篇文章 4 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

效果图：

安装：

npm install echarts
npm install echarts-gl
or
pnpm add echarts
pnpm add echarts-gl

下载世界国家geojson并引入

https://files.cnblogs.com/files/firstcsharp/%E4%B8%96%E7%95%8C%E5%9B%BD%E5%AE%B6geojson%E5%A4%A7%E5%85%A8%EF%BC%8C%E5%90%84%E5%9B%BD%E5%9C%B0%E5%9B%BEjson%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD.zip

找到里面的countries.geo.json文件，这是我们需要的，可以放在assets/json下（都可以）

页面引入

import "echarts-gl";
import * as echarts from "echarts";
import WorldJson from "../../assets/json/countries.geo.json";

实现完整代码

这里把实现地球的代码单独抽离为一个组件，在需要用到的地方引入就可以，传入一个id

<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import "echarts-gl";
import * as echarts from "echarts";
import WorldJson from "../../assets/json/countries.geo.json";
let chartMaps;
export default {
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.drawWorld();
  },
  destroyed() {
    window.removeEventListener("resize", this.selfAdaption);
  },
  methods: {
    drawWorld() {
      chartMaps = echarts.init(document.getElementById(this.id));
      //这里记得注册上面引入进来的json文件
      echarts.registerMap("world", WorldJson);
      let canvas = document.createElement("canvas");
      // 生成球面纹理
      let baseTexture = echarts.init(canvas, null, {
        width: 4096,
        height: 2048,
      });
      //航线终点位置
      const coord = [
        [61.210817, 35.650072],
        [16.326528, -5.87747],
      ];
      //航线起点终点位置
      const lines_coord = [
        {
          coords: [
            [2.691702, 6.258817],
            [61.210817, 35.650072],
          ],
        },
        {
          coords: [
            [2.691702, 6.258817],
            [16.326528, -5.87747],
          ],
        },
      ];
      //航线飞机模型
      let 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";
      baseTexture.setOption({
        backgroundColor: "#031c48",
        geo: {
          name: "地图",
          // type: 'map',  //地图种类、
          map: "world", //地图类型。
          zlevel: 0,
          show: true,
          layoutCenter: ["50%", "50%"],
          roam: false,
          layoutSize: "90%",
          zoom: 1,
          label: {
            show: false,
            fontSize: 14,
            // 文字顔色
            color: "#43D0D6"
          },
          itemStyle: {
            areaColor: "#2455ad",
            borderWidth: 1, //设置外层边框
            borderColor: "#000c2d",
            //地图区域的多边形 图形样式。
          },
          //高亮状态下的样试
          emphasis: {
            label: {
              show: true,
              fontSize: 30,
              color: 'yellow',
            },
            itemStyle: {
              areaColor: "#357cf8",
            }
          }
        },
        // viewControl: {
        //   autoRotate: false,
        // },
        series: [
          {
            // effectScatter画散点【起点】
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 6,
            rippleEffect: {
              period: 3,
              brushType: "stroke",
              scale: 2,
            },
            itemStyle: {
              color: "red",
              opacity: 0.7,
            },
            data: coord.slice(2),
          },
          {
            // 画中心散点【终点】,这里是为了区分起点终点不同样式，所以分开写，如果二者样式一样那就直接合在一起写就好了
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 10,
            rippleEffect: {
              period: 4,
              brushType: "stroke",
              scale: 4,
            },
            itemStyle: {
              color: "#FF5722",
              opacity: 1,
            },
            data: coord.slice(0, 2),
          },
          //这里设了2条不同效果的飞线是为了讲他们叠加起来，满足飞机后面白色的喷气动画效果
          {
            type: "lines",
            zlevel: 1,
            effect: {
              show: true,
              period: 5,
              trailLength: 0.7,
              color: "#fff",
              symbolSize: 3,
            },
            lineStyle: {
              color: "#FFB800",
              width: 0,
              curveness: 0.2
            },
            data: lines_coord,
          },
          {
            // lines画线
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            symbol: ["none", "arrow"], //设置飞线的起点终点处的绘制图形
            symbolSize: 12,
            effect: {
              show: true,
              period: 5, //箭头指向速度，值越小速度越快
              trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: planePath, //飞机图标
              symbolSize: 15, //图标大小
              color: "#01AAED",
            },
            itemStyle: {
              borderWidth: 1,
              lineStyle: {
                type: "solid",
                shadowBlur: 10,
              }
            },
            lineStyle: {
              //飞线的样式
              width: 1.2,
              opacity: 0.6,
              curveness: 0.2,
              color: "#FFB800"
            },
            data: lines_coord,
          },
        ],
      });
      // 绘制球体
      let option = {
        backgroundColor: "#000000",
        tooltip: {
          show: true,
          trigger: "item",
        },
        globe: {
          globeRadius: 100,
          globeOuterRadius: 150,
          silent: false, //鼠标移入区域变色 如果设置为true则无法高亮
          shading: "color",
          // environment: "#063899",
          baseTexture: baseTexture,
          viewControl: {
            alpha: 30,
            beta: 90,
            autoRotate: true, // 开启自动旋转
            autoRotateAfterStill: 10,
            distance: 120,
          },
          light: {
            main: {
              color: "#fff",
              intensity: 1,
              shadow: false,
              alpha: 40,
              beta: -30,
            },
            ambient: {
              color: "#fff",
              intensity: 1,
            },
            postEffect: {
              enable: true,
              SSAO: {
                enable: true,
                radius: 10,
              },
            },
          },
        },
        series: [
          {
            name: '世界贸易情况',
            type: 'lines3D',
            coordinateSystem: 'globe',
            effect: {
                show: true,
            },
            blendMode: 'lighter',
            lineStyle: {
                width: 2,
            },
            data: [],
            silent: false,//鼠标移入区域变色 如果设置为true则无法高亮
          }
        ]
      };
      // 随机数据 i控制线数量
      for (let i = 0; i < 100; i++) {
        // option.series[0].data = option.series[0].data.concat(this.rodamData());
        option.series[0].data.push(this.rodamData())
      }
      chartMaps.setOption(option);
      window.addEventListener("resize",this.selfAdaption);
    },
    // 模拟随机数据
    rodamData() {
      let name = "随机数据" + Math.random().toFixed(5) * 100000;
      // 模拟数据，构造飞线的起始经纬度
      let longitude = 116.2;
      let latitude = 39.56;
      let longitude2 = Math.random() * 360 - 180;
      let latitude2 = Math.random() * 180 - 90;
      return {
        coords: [
          [longitude, latitude],
          [longitude2, latitude2],
        ],
        value: (Math.random() * 3000).toFixed(2),
      };
    },
    // 自适应
    selfAdaption() {
      chartMaps.resize();
      // this.drawWorld();
    },
  },
};
</script>