使用 Angluar5 的 Echarts 地圖 及自定義地圖顯示的位置

參考資料：http://gallery.echartsjs.com/editor.html?c=xHJxewNZdW

廣東地圖JSON數據：http://gallerybox.echartsjs.com/asset/get/s/data-1502779360900-HkKJuGe_W.json

angluar 封裝的 Echarts，基本上是按照這個思路寫的

在xx.model.ts 文件中添加依賴

import {NgxEchartsModule, NgxEchartsService} from 'ngx-echarts';

@NgModule({
    providers: [NgxEchartsService],
    imports: [
        /*echars依賴*/
        NgxEchartsModule
    ],
    ...
})

在 main.component.ts 文件中添加

import {NgxEchartsService} from 'ngx-echarts';

export class MainComponent (){
	// HttpClient from '@angular/common/http'
	constructor( private http: HttpClient ,private nes: NgxEchartsService) {}

	ngOnInit() {
		// 初始化對象
                const echarts = this.nes.echarts;
		// 獲取廣東地圖的json文件
                this.http.get('assets/json/gd.json')
                .subscribe(
                    geoJson => {
                        var myChart = echarts.init(document.getElementById('gdMap'))
                        // 註冊地圖
						echarts.registerMap('廣東', geoJson);
                        myChart.setOption(
							// js中不需要加 echarts.
                            echarts.option = this.option
                        );
                    },
                    error1 => {
                        console.log(error1);
                    },
                    () => {
                        console.log('初始化地圖已完成。');
                    }
                );
        }
	
	
	option = this.opt(1350, 160, '人口', '萬', true, false);

        opt(max, min, vmp, unit, flag1, flag2) {
            var optn = {
                title: {
                    text: '廣東省',
                    subtext: '更新時間 2018/05/29',
                    left: 'center',
                    textStyle: {
                        color: '#000'
                    }
                },

                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['人口'],
                    selectedMode: 'single',
                    selected: {
                        '人口': flag1,
                    }
                },
                visualMap: {
                    min: min,
                    max: max,
                    text: [vmp, '單位：' + unit],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {
                            readOnly: false
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    formatter: function(params) {
                        return params.name + ": " + params.value + unit;
                    }
                },
                series: [{
                    name: '人數',
                    type: 'map',
                    map: '廣東',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{
                        name: '廣州市',
                        value: 1350
                    }, {
                        name: '深圳市',
                        value: 1190
                    }, {
                        name: '惠州市',
                        value: 167
                    }, {
                        name: '汕頭市',
                        value: 555
                    }, {
                        name: '佛山市',
                        value: 743
                    }, {
                        name: '韶關市',
                        value: 293
                    }, {
                        name: '惠州',
                        value: 500
                    }]
                }]
            };
            return optn;
        }
｝

在 main.component.html 添加

<div style="width: 1000px; height: 1000px; " id="gdMap"></div>

也可以這樣

<div echarts [options]="option" [loading]="showloading" class="demo-chart"></div>

新增：關於自定義地圖上的點

http://www.echartsjs.com/gallery/editor.html?c=doc-example/scatter-visualMap-piecewise

獲取經緯度

http://api.map.baidu.com/lbsapi/getpoint/index.html

氣泡

http://gallery.echartsjs.com/editor.html?c=xBJDR584vG

有用請點點 (￣︶￣)↗ 贊