首先要在Angular項目中安裝echarts的依賴：

npm install echarts --save npm install ngx-echarts --save

第二、在創建包含地圖的Angular組件的時候引入echarts插件和包含的地圖插件，并完成配置和初始化。主要有兩種方式：

? ? ?第一種方式，通過JSON方式引入，步驟如下：

? ?（1）引入httpClient和NgxEchartsService服務，并依賴注入對應組件。

import {HttpClient} from '@angular/common/http'; import {NgxEchartsService} from 'ngx-echarts';constructor(private http: HttpClient,private nes: NgxEchartsService,private draw: DrawService) { }

另外記得在組件對應的模塊配置文件中添加HttpClientModule和NgxEchartsModule模塊；

（2）配置地圖參數信息，具體配置信息可查詢echarts官網配置項內容自行配置。該demo配置項對象代碼如下：

setMapOption() {this.mapOption = {title : {text: '中移在線通信云項目實時監控',subtext: '',left: 'center',textStyle: {color: '#333',fontSize: '28',},},backgroundColor: '#96aec7',tooltip : {trigger: 'item',formatter: function (val) {return `項目進度：<br>${val.data.name}：${val.data.value}%<br>告警：${val.data.warn}<br>問題：${val.data.problem}`;}},legend: {orient: 'vertical',left: 'left',data:[]},visualMap: {min: 0,max: 100,left: 'left',top: 'bottom',text:['高','低'], // 文本，默認為數值文本calculable : true,inRange: {color: ['#feffc7', '#02cb00']}},series : [{name: '項目進度',type: 'map',mapType: 'china',roam: false,label: {normal: {show: true},emphasis: {show: true}},itemStyle: {color: 'red',areaColor: '#fff',},emphasis: {itemStyle: {areaColor: '#f9ba09'}},data:[{name: '北京',value: Math.round(Math.random()*100),warn: 10,problem: 12},{name: '天津',value: Math.round(Math.random()*100),warn: 10,problem: 12},{name: '上海',value: Math.round(Math.random()*100),warn: 10,problem: 12},{name: '重慶',value: Math.round(Math.random()*100),warn: 10,problem: 12},{name: '河北',value: Math.round(Math.random()*100)},{name: '河南',value: Math.round(Math.random()*100)},{name: '云南',value: Math.round(Math.random()*100)},{name: '遼寧',value: Math.round(Math.random()*100)},{name: '黑龍江',value: Math.round(Math.random()*100)},{name: '湖南',value: Math.round(Math.random()*100)},{name: '安徽',value: Math.round(Math.random()*100)},{name: '山東',value: Math.round(Math.random()*100)},{name: '新疆',value: Math.round(Math.random()*100)},{name: '江蘇',value: Math.round(Math.random()*100)},{name: '浙江',value: Math.round(Math.random()*100)},{name: '江西',value: Math.round(Math.random()*100)},{name: '湖北',value: Math.round(Math.random()*100)},{name: '廣西',value: Math.round(Math.random()*100)},{name: '甘肅',value: Math.round(Math.random()*100)},{name: '山西',value: Math.round(Math.random()*100)},{name: '內蒙古',value: Math.round(Math.random()*100)},{name: '陜西',value: Math.round(Math.random()*100)},{name: '吉林',value: Math.round(Math.random()*100)},{name: '福建',value: Math.round(Math.random()*100)},{name: '貴州',value: Math.round(Math.random()*100)},{name: '廣東',value: Math.round(Math.random()*100)},{name: '青海',value: Math.round(Math.random()*100)},{name: '西藏',value: Math.round(Math.random()*100)},{name: '四川',value: Math.round(Math.random()*100)},{name: '寧夏',value: Math.round(Math.random()*100)},{name: '海南',value: Math.round(Math.random()*100)},// {name: '臺灣',value: Math.round(Math.random()*100)},{name: '香港',value: Math.round(Math.random()*100)},{name: '澳門',value: Math.round(Math.random()*100)}]}]};}

（3）使用http服務獲取china.json，在對應的回調函數中初始化地圖，代碼如下：

@ViewChild('chartMap') chartMap: ElementRef; // 獲取DOM節點的對象 initEcharts() {this.http.get('assets/json/china.json').subscribe(res => {const echart = this.echarts.init(this.chartMap.nativeElement); // 獲取視圖的echarts的DOM節點，并初始化對象this.echarts.registerMap('china', res); // 注冊china.json的數據到初始化的echarts對象echart.setOption(this.mapOption); // 綁定地圖的配置參數對象，參考第二步echart.on('click', function(params) { // 綁定地圖點擊事件// console.log(params);}.bind(this));}); }

（4）在組件初始化方法中調用echarts初始化方法，這個地方有個設置地圖dom固定寬高的方法，可根據頁面寬度自適應地圖的高度，如果不設置高度，echarts圖表無法顯示：

ngOnInit() {this.setChartStyle(); // 設置地圖固定寬高比的方法this.setMapOption(); // 配置map地圖參數信息方法this.initEcharts(); // 初始化地圖 }setChartStyle() { const width = this.chartMap.nativeElement.offsetWidth;this.chartMap.nativeElement.style.height = width * 0.4 + 'px'; }

第二種方式，通過china.js引入的方式，該方式可不引入NgxEchartsService，步驟跟第一種類似，如下：

（1）引入china.js和echarts組件，此處不需要注入其他服務，代碼如下：

import 'echarts/map/js/china.js'; import * as echarts from 'echarts';

同樣在組件對應的模塊配置文件中添加HttpClientModule和NgxEchartsModule模塊；

（2）配置地圖信息同第一種方法。

（3）初始化地圖方法，代碼如下：

const echart = echarts.init(this.chartMap.nativeElement); // 獲取視圖的echarts的DOM節點，并初始化對象echart.setOption(this.mapOption); // 綁定地圖的配置參數對象echart.on('click', function(params) {console.log(params);}.bind(this));

(4)在組件的初始化方法中初始化地圖，代碼同第一種方法（4）。

效果圖如下所示：

總結

以上是生活随笔為你收集整理的Angular项目中使用echarts中国地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。