angular7中引入中國地圖
最近項目中需要做一個數(shù)據(jù)大屏氓涣，用中國地圖散點圖展示一些數(shù)據(jù)鹃操，
圖表用的是echart4.2.1春哨，angular版本是7.1.0
下面簡要介紹一下實現(xiàn)過程：
第一步：
在angular.json中引入china.js恩伺，
angular-json-config.png
如果你要展示的是省份地圖赴背，那就把省份js文件加進去晶渠，所有的省份js文件可以在node_modules/echarts/map/js/province目錄下找到凰荚；
province-js.png
第二步：
在業(yè)務(wù)組件中導(dǎo)入china.js褒脯，這一步很關(guān)鍵，沒有導(dǎo)入的話地圖出不來番川；
import-china-js.png
第三步：
設(shè)置中國地圖散點圖配置項；
public chinaMapOption: EChartOption = {
backgroundColor: '#080B34',
tooltip: {
trigger: 'item',
formatter: (params) => {
return `${params.name}: ${this.decimalPipe.transform(params.value[2])} 元`;
}
},
// 散點數(shù)據(jù)中不同范圍值所對應(yīng)的表現(xiàn)狀態(tài)
visualMap: {
min: 0,
// max: 300,
calculable: true,
// visualMap-piecewise 控制散點圖時 inrange同時也定義了散點的顏色尺寸等
inRange: {
color: ['#FEC696'], // 散點范圍的顏色
colorAlpha: 1, // 透明度
},
textStyle: {
color: '#fff'
},
// 隱藏手柄
show: false,
},
geo: {
map: 'china',
// 開啟鼠標(biāo)縮放和漫游
roam: true,
// 縮放極限控制
scaleLimit: {
min: 0.5,
max: 8
},
// 當(dāng)前視角的縮放比例
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
itemStyle: {
// 地圖背景色
normal: {
areaColor: '#559aeb',
borderColor: '#111'
},
// hover時的背景色
emphasis:
{
areaColor: '#559aeb'
}
}
},
series: [
{
name: '銷售建檔',
type: 'scatter', // 添加散點系列
coordinateSystem: 'geo', // 坐標(biāo)系為地理坐標(biāo)系
symbolSize: function (val) {
return val[3]; // 散點圓圈的大小
// return 10;
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#FEC696',
// opacity: 1 // 散點透明度
}
}
}
]
};
// series.data數(shù)據(jù)需要把后臺返回的數(shù)據(jù)處理之后再賦值颁督，其數(shù)據(jù)格式為 [{name: '城市名稱', value: [維度值，經(jīng)度值沉御，散點值，...]}]
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) {
// 縮放地圖后刷新數(shù)據(jù)保持縮放狀態(tài)
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);
}
另外，數(shù)據(jù)大屏一般會需要全屏展示试疙，布局啥的最好用百分比，如果全屏與非全屏切換時UI設(shè)計有不一樣的地方效斑，可以監(jiān)聽window resize事件來實現(xiàn)不同的效果非春。
不要問我為啥不監(jiān)聽fullscreenchange事件缓屠，試了，不起作用敌完。
this.eventManager.addGlobalEventListener('window', 'resize', () => {
// window.innerHeight: 可視區(qū)域(瀏覽器窗口高度+滾動條高度)储耐，screen.height:顯示器的物理高度此時為全屏
if (window.innerHeight === screen.height) {
}
});
// 這是一段沒什么用的代碼
// @HostListener('document:fullscreenchange', ['$event'])
// @HostListener('document:webkitfullscreenchange', ['$event'])
// @HostListener('document:mozfullscreenchange', ['$event'])
// @HostListener('document:MSFullscreenChange', ['$event'])
// fullscreenmode(){}
最后效果如圖滨溉，全屏?xí)r會放大
bubble-china-map.png
