背景

最近在引入echarts的各种图表，比如3D地球

image.png

开始

//首先引入三个包
import echarts from 'echarts';
import 'echarts-gl';
import world from 'echarts/map/js/world.js';

初始化地图

 initMap(config) {
      const vm = this;
      const canvas = document.createElement('canvas');
      this.mapChart = echarts.init(canvas, null, {
        width: 4096,
        height: 2048,
      });
      this.mapChart.setOption(
        {
          backgroundColor: config.map.bgColor, // 背景色
          geo: {
            z: 1,
            type: 'map',
            map: 'world',
            top: 0,
            left: 0, // 绘制完整尺寸的 echarts 实例
            right: 0,
            bottom: 0,
            boundingCoords: [[-180, 90], [180, -90]], // 设置为一张完整经纬度的世界地图
            nameMap: {
              China: '中国', // 变成中文
            },
            label: {
              show: config.map.textLabel.isTextLabel, // 是否显示文本
              color: config.map.textLabel.textColor, // 文本颜色
            },
            itemStyle: {
              // 地图区域的多边形 图形样式。 默认样试。
              normal: {
                color: {
                  type: 'linear',
                  x: 100,
                  y: 12,
                  x2: 12,
                  y2: 100,
                  colorStops: [
                    {
                      offset: 0,
                      color: config.map.area.areaColor[0], // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: config.map.area.areaColor[1], // 100% 处的颜色
                    },
                  ],
                  global: config.map.area.isGlobal, // 缺省为 false
                },
                borderColor: config.map.area.borderColor, // 边框线
                borderWidth: config.map.area.borderWidth * common.getFontSize(), // 线宽
                borderType: config.map.area.borderType, // 支持 'solid', 'dashed', 'dotted'。
                shadowColor: config.map.area.shadowColor[0], // 阴影颜色
                shadowBlur: config.map.area.shadowBlur * common.getFontSize(), // 模糊大小
                shadowOffsetX:
                  config.map.area.shadowOffsetX * common.getFontSize(), // 水平偏移
                shadowOffsetY:
                  config.map.area.shadowOffsetY * common.getFontSize(), // 垂直偏移
              },
            },
            emphasis: {
              // 高亮状态下的多边形和标签样式。
              label: {
                // 文本
                show: config.map.textLabel.isTextLabel,
                color: config.map.textLabel.emphasizeColor,
              },
              itemStyle: {
                // 区域
                areaColor: config.map.area.emphasizeAreaColor,
              },
            },
            regions: [
              {
                name: '中国',
                itemStyle: {
                  normal: {
                    // areaColor: config.map.area.chinaColor,
                  },
                },
              },
            ], // 区域块的颜色
          },
        },
        true
      );
    },

初始化地球

    // 初始化地球
    initChart() {
      const vm = this;
      vm.chart = echarts.init(document.getElementById(vm.dataInfo.id));
      const data = vm.resetData(vm.dataInfo.data.graphData.series[0].data);
      const { unit } = vm.dataInfo.data.graphData.otherData || '';
      const config = vm.getEarthConfig();
      vm.initMap(config);
      const bgImg = config.earth.bgImg || '';
      // 地球
      const option = {
        backgroundColor: '',
        globe: {
          roam: false, // 是否允许鼠标滚动放大，缩小
          baseTexture: this.mapChart,
          environment: bgImg == '' ? '' : require(`../../../${bgImg}`),
          shading: config.earth.shading, // 地球中三维图形的着色效果,通过经典的 lambert 着色表现光照带来的明
          light: {
            ambient: {// 环境光
              color: config.earth.enLightColor, // 颜色
              intensity: config.earth.enIntensity, // 光的强度
            },
            main: {
              // 太阳光
              color: config.earth.lightColor, // 颜色
              intensity: config.earth.intensity, // 主光源的强度
              shadow: false,
            },
          },
          postEffect: {// 后处理特效的相关配置
            enable: true,
            bloom: {// 高光特效
              enable: true,
            },
            depthOfField: {// 景深效果
              enable: false,
            },
          },
          viewControl: {
            autoRotate: config.earth.isAutoRotate, // 自动旋转关闭
            autoRotateSpeed: config.earth.autoRotateSpeed,
            targetCoord: [100.46, 39.92], // 定位到中国
            zoomSensitivity: config.earth.isZoom == true ? 1 : 0, // 是否可缩放
          },
        },
        series: vm.rebuildSeriesData(data, config, unit),
      };
      vm.chart.setOption(option, true);
      // 点击事件
      this.mapChart.on('click', params => {});
      this.chart.on('click', params => {});
    },

注意点

多看看官网