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