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
发表评论 (审核通过后显示评论)：