angular7 echarts中国散点图

作者 : 开心源码 本文共2535个字,预计阅读时间需要7分钟 发布时间: 2022-05-13 共178人阅读

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>

数据大屏一般会需要全屏展现,布局啥的最好用百分比,假如全屏与非全屏切换时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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » angular7 echarts中国散点图

发表回复