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

5.效果图

Angular5 echarts^4.2.1 使用中国地图(上)_第1张图片

6.更多精彩样式

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

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

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 {

    data = [{
        name: '江苏省',
        value: 15.3
    },
        {
            name: '北京市',
            value: 3.8
        },
        {
            name: '上海',
            value: 4.6
        },
        {
            name: '重庆',
            value: 3.6
        },
        {
            name: '河北',
            value: 3.4
        },
        {
            name: '河南',
            value: 3.2
        },
        {
            name: '云南',
            value: 1.6
        },
        {
            name: '辽宁',
            value: 4.3
        },
        {
            name: '黑龙江',
            value: 4.1
        },
        {
            name: '湖南',
            value: 2.4
        },
        {
            name: '安徽',
            value: 3.3
        },
        {
            name: '山东',
            value: 3.0
        },
        {
            name: '新疆',
            value: 1
        },
        {
            name: '江苏',
            value: 3.9
        },
        {
            name: '浙江',
            value: 3.5
        },
        {
            name: '江西',
            value: 2.0
        },
        {
            name: '湖北',
            value: 2.1
        },
        {
            name: '广西',
            value: 3.0
        },
        {
            name: '甘肃',
            value: 1.2
        },
        {
            name: '山西',
            value: 3.2
        },
        {
            name: '内蒙古',
            value: 3.5
        },
        {
            name: '陕西',
            value: 2.5
        },
        {
            name: '吉林',
            value: 4.5
        },
        {
            name: '福建',
            value: 2.8
        },
        {
            name: '贵州',
            value: 1.8
        },
        {
            name: '广东',
            value: 3.7
        },
        {
            name: '青海',
            value: 0.6
        },
        {
            name: '西藏',
            value: 0.4
        },
        {
            name: '四川',
            value: 3.3
        },
        {
            name: '宁夏',
            value: 0.8
        },
        {
            name: '海南',
            value: 1.9
        },
        {
            name: '台湾',
            value: 0.1
        },
        {
            name: '香港',
            value: 0.1
        },
        {
            name: '澳门',
            value: 0.1
        }
    ];


    yData = [];
    barData = [];

    public option = {
        title: [{
            show: true,
            text: '排名情况',
            textStyle: {
                color: '#2D3E53',
                fontSize: 18
            },
            right: 180,
            top: 100
        }],
        tooltip: {
            show: true,
            formatter: function (params) {
                return params.name + ':' + params.data['value'] + '%';
            },
        },
        visualMap: {
            type: 'continuous',
            orient: 'horizontal',
            itemWidth: 10,
            itemHeight: 80,
            text: ['高', '低'],
            showLabel: true,
            seriesIndex: [0],
            min: 0,
            max: 2,
            inRange: {
                color: ['#6FCF6A', '#FFFD64', '#FF5000']
            },
            textStyle: {
                color: '#7B93A7'
            },
            bottom: 30,
            left: 'left',
        },
        grid: {
            right: 10,
            top: 135,
            bottom: 100,
            width: '20%'
        },
        xAxis: {
            show: false
        },
        yAxis: {
            type: 'category',
            inverse: true,
            nameGap: 16,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                interval: 0,
                margin: 85,
                textStyle: {
                    color: '#455A74',
                    align: 'left',
                    fontSize: 14
                },
                rich: {
                    a: {
                        color: '#fff',
                        backgroundColor: '#FAAA39',
                        width: 20,
                        height: 20,
                        align: 'center',
                        borderRadius: 2
                    },
                    b: {
                        color: '#fff',
                        backgroundColor: '#4197FD',
                        width: 20,
                        height: 20,
                        align: 'center',
                        borderRadius: 2
                    }
                },
                formatter: function (params) {
                    if (parseInt(params.slice(0, 1)) < 3) {
                        return [
                            '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                        ].join('\n');
                    } else {
                        return [
                            '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                        ].join('\n');
                    }
                }
            },
            data: this.yData
        },
        geo: {
            // roam: true,
            map: 'china',
            left: 'left',
            right: '300',
            // layoutSize: '80%',
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                emphasis: {
                    areaColor: '#fff464'
                }
            }
        },
        series: [{
            name: 'mapSer',
            type: 'map',
            roam: false,
            geoIndex: 0,
            label: {
                show: false,
            },
            data: this.data
        }, {
            name: 'barSer',
            type: 'bar',
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 8,
            barGap: 0,
            itemStyle: {
                normal: {
                    color: function (params) {
                        // build a color map as your need.
                        var colorList = [{
                            colorStops: [{
                                offset: 0,
                                color: '#FFD119' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#FFAC4C' // 100% 处的颜色
                            }]
                        },
                            {
                                colorStops: [{
                                    offset: 0,
                                    color: '#00C0FA' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#2F95FA' // 100% 处的颜色
                                }]
                            }
                        ];
                        if (params.dataIndex < 3) {
                            return colorList[0];
                        } else {
                            return colorList[1];
                        }
                    },
                    barBorderRadius: 15
                }
            },
            data: this.barData
        }]
    };

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

    ngOnInit() {
        for (var i = 0; i < 10; i++) {
            this.barData.push( this.data[i]);
            this.yData.push(i +  this.data[i].name);
        }

        // 初始化对象
        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('初始化地图已完成。');
            }
        );
    }
}

Angular5 echarts^4.2.1 使用中国地图(上)_第2张图片

 

对于现实可能存在的空白问题,所有的echarts都可以根据下面模版加上去你想要的数据和样式!!注意id要相同!!

html

ts

Angular5 echarts^4.2.1 使用中国地图(上)_第3张图片

 

import {Component, Input, OnInit} from '@angular/core';
import * as echarts from '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}
{c}' }, series: [ { name: '中国', type: 'map', mapType: 'china', selectedMode: 'multiple', label: { normal: { show: true }, emphasis: { show: true } }, data: [ {name: '广东', selected: true, value: 22} ] } ] }; app: any; dom: HTMLElement; myChart: any; ngOnInit(): void { this.app = {}; this.dom = document.getElementById('map'); this.myChart = echarts.init(this.dom); this.myChart.setOption(this.option, true); } }

 

你可能感兴趣的:(angular6)