Angular5 echarts^4.2.1 使用中国地图（上）

1.按照文档的样式扒下来https://echarts.baidu.com/examples/editor.html?c=map-china

2.china.json 复制到 src/assets/json，数据来源于下载的echarts的 node_modules/echarts/map/json

3.读取本地的china.json文件

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {NgxEchartsService} from 'ngx-echarts';

/**
 * @Description : 中国地图
 * @Auth : Xuhy
 * @Date : 2019/5/24
 * @Time : 10:00
 */
@Component({
    selector: 'app-echarts-china',
    templateUrl: './china-js.component.html',

})
export class ChinaJsComponent implements OnInit {

    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        series: [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                selectedMode: 'multiple',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: [
                    {name: '广东', selected: true}
                ]
            }
        ]
    };

    constructor(private http: HttpClient, private nes: NgxEchartsService) {
    }

    ngOnInit() {
        // 初始化对象
        const echarts = this.nes.echarts;
        // 获取广东地图的json文件
        this.http.get('assets/json/china.json').subscribe(geoJson => {
                var myChart = echarts.init(document.getElementById('chinaMap'));
                // 注册地图
                echarts.registerMap('中国', geoJson);
                myChart.setOption(
                    // js中不需要加 echarts.
                    echarts.option = this.option
                );
            },
            error1 => {
                console.log(error1);
            },
            () => {
                console.log('初始化地图已完成。');
            }
        );
    }
}

4.component

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

5.效果图

6.更多精彩样式

https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

7.利用上方demo样式的例子