在Angular 6中使用ngx-echarts 组件的地图（map）图表

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhy13087344578/article/details/82910276

首先，贴出官网ngx-echarts 官方文档ngx-echarts 官方demo

ngx-echarts是根据echarts插件开发的，适用于Angular2.x及以上，另外不同版本的ngx-echarts也适用于不同版本的Angular，主要划分版本是Angular 6.

1. v4.0.0 for Angular >= 6
2. v2.3.1 for Angular < 6

步骤如下：

一、Installation

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

二、Configue

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    ...,
    NgxEchartsModule
  ],
})
export class AppModule { }

三、Using

html

<div  echarts [options]="regionOptions"></div>

ts

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

import * as echarts from 'echarts';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    regionOptions;

    constructor(
        private http: HttpClient
    ) { }

    ngOnInit() {
    //  china.json 的路径需要正确填写
        this.http.get('assets/china.json')
            .subscribe(geoJson => {
                echarts.registerMap('China', geoJson);
                this.regionOptions = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}：{c}'
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: { readOnly: false },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 50,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#ADCDEF', '#2171C1']
                        }
                    },
                    series: [
                        {
                            type: 'map',
                            mapType: 'China',  //  与注册时的名字保持统一   echarts.registerMap('China', geoJson);
                            itemStyle: {
                                normal: {
                                    areaColor: '#AAD5FF',
                                    borderColor: 'white',
                                    label: { show: true, color: 'white' }
                                },
                                emphasis: {
                                    areaColor: '#A5DABB'
                                }
                            },
                            zoom: 1.2,
                            data: [
                                { name: '北京', value: 0 },
                                { name: '天津', value: 0 },
                                { name: '重庆', value: 0 },
                                { name: '上海', value: 0 },
                                { name: '湖南', value: 0 },
                                { name: '广东', value: 20 },
                                { name: '福建', value: 0 },
                                { name: '江西', value: 0 },
                                { name: '四川', value: 0 },
                                { name: '广西', value: 0 },
                                { name: '新疆', value: 0 },
                                { name: '西藏', value: 0 },
                                { name: '青海', value: 0 },
                                { name: '甘肃', value: 0 },
                                { name: '宁夏', value: 0 },
                                { name: '内蒙古', value: 0 },
                                { name: '海南', value: 0 },
                                { name: '山西', value: 0 },
                                { name: '陕西', value: 0 },
                                { name: '云南', value: 0 },
                                { name: '贵州', value: 0 },
                                { name: '湖北', value: 0 },
                                { name: '浙江', value: 0 },
                                { name: '安徽', value: 0 },
                                { name: '河南', value: 0 },
                                { name: '山东', value: 0 },
                                { name: '江苏', value: 0 },
                                { name: '河北', value: 0 },
                                { name: '辽宁', value: 0 },
                                { name: '吉林', value: 0 },
                                { name: '黑龙江', value: 0 },
                                { name: '台湾', value: 0 }]
                        }
                    ]
                };
            });
    }
}

该demo地址 demo
使用方法：下载demo源码，然后npm i ， 运行 ng s