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

本文章由javascript技术分享原创和收集