angular echarts 中国散点图

angular7中引入中国地图
最近项目中需要做一个数据大屏，用中国地图散点图展示一些数据，
图表用的是echart4.2.1，angular版本是7.1.0
下面简要介绍一下实现过程：

第一步：

在angular.json中引入china.js，

angular-json-config.png

如果你要展示的是省份地图，那就把省份js文件加进去，所有的省份js文件可以在node_modules/echarts/map/js/province目录下找到；

province-js.png

第二步：

在业务组件中导入china.js，这一步很关键，没有导入的话地图出不来；

import-china-js.png

第三步：

设置中国地图散点图配置项；

  public chinaMapOption: EChartOption = {
    backgroundColor: '#080B34',
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        return `${params.name}: ${this.decimalPipe.transform(params.value[2])} 元`;
      }
    },
    // 散点数据中不同范围值所对应的表现状态
    visualMap: {
      min: 0,
      // max: 300,
      calculable: true,
      // visualMap-piecewise 控制散点图时 inrange同时也定义了散点的颜色尺寸等
      inRange: {
        color: ['#FEC696'], // 散点范围的颜色
        colorAlpha: 1, // 透明度
      },
      textStyle: {
        color: '#fff'
      },
      // 隐藏手柄
      show: false,
    },
    geo: {
      map: 'china',
      // 开启鼠标缩放和漫游
      roam: true,
      // 缩放极限控制
      scaleLimit: {
        min: 0.5,
        max: 8
      },
      // 当前视角的缩放比例
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        // 地图背景色
        normal: {
          areaColor: '#559aeb',
          borderColor: '#111'
        },
        // hover时的背景色
        emphasis:
        {
          areaColor: '#559aeb'
        }
      }
    },
    series: [
      {
        name: '销售建档',
        type: 'scatter', // 添加散点系列
        coordinateSystem: 'geo', // 坐标系为地理坐标系
        symbolSize: function (val) {
          return val[3]; // 散点圆圈的大小
          // return 10;
        },
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            color: '#FEC696',
            // opacity: 1 // 散点透明度
          }
        }
      }
    ]
  };

  // series.data数据需要把后台返回的数据处理之后再赋值，其数据格式为 [{name: '城市名称', value: [维度值，经度值，散点值，...]}]
  public redrawChinaMap(res) {
    const result = [];
    let transaction_volume = [];
    if (res.length) {
      transaction_volume = res.map(item => {
        const obj = {
          name: item.city_name,
          value: [Number(item.wgs84_lng), Number(item.wgs84_lat), Number(item.transaction_volume), item.bubble_size.toFixed()]
        };
        result.push(obj);
        return item.transaction_volume;
      });
    }
    this.datas.maxValue = Math.max(...transaction_volume);
    this.chinaMapOption.visualMap.max = this.datas.maxValue;
    this.chinaMapOption.series[0]['data'] = result;
    if (this.instance.chinaMap) {
      // 缩放地图后刷新数据保持缩放状态
      this.instance.chinaMap.setOption({
        visualMap: {
          max: this.datas.maxValue
        },
        series: [{
          data: result
        }]
      });
    }
  }

// html
<div class="chart-div" echarts [options]="chinaMapOption" [autoResize]="true"></div>

加载城市级别的中国地图

1.配置tsconfig.json

在 compilerOptions 中加上这两个配置，将json文件作为模块解析

    "resolveJsonModule": true,
    "esModuleInterop": true,

2.在组件中引入 json 文件

import chinaCityJson from 'echarts/map/json/china-cities.json';

3.图表初始化时注册地图

  public chartInit(ec) {
    this.instance = ec;
    echarts.registerMap("china", chinaCityJson);
  }

另外，数据大屏一般会需要全屏展示，布局啥的最好用百分比，如果全屏与非全屏切换时UI设计有不一样的地方，可以监听window resize事件来实现不同的效果。
不要问我为啥不监听fullscreenchange事件，试了，不起作用。

    this.eventManager.addGlobalEventListener('window', 'resize', () => {
      // window.innerHeight: 可视区域(浏览器窗口高度+滚动条高度)，screen.height:显示器的物理高度此时为全屏
      if (window.innerHeight === screen.height) {
        }
    });
// 这是一段没什么用的代码
// @HostListener('document:fullscreenchange', ['$event'])
// @HostListener('document:webkitfullscreenchange', ['$event'])
// @HostListener('document:mozfullscreenchange', ['$event'])
// @HostListener('document:MSFullscreenChange', ['$event'])
// fullscreenmode(){}

最后效果如图，全屏时会放大

bubble-china-map.png