使用 Angluar5 的 Echarts 地图 及自定义地图显示的位置

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

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

有用请点点 (￣︶￣)↗ 赞