Angular7 + 各个省市地图【传入不同的行政区code自动生成对应的echarts地图】

其他 2020-01-11 09:32:34 阅读次数: 0

1、以江西为例

/**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

http://echarts.baidu.com/option.html#series-map.geoIndex

并且加了pin气泡图标以示数值大小
*/

var uploadedDataURL = "/asset/get/s/data-1509940365453-SkScnUTCW.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('jiangxi', geoJson);
    myChart.hideLoading();
    var geoCoordMap: any = [
	{
		name: '赣州市',
		cp: [114.940278, 25.85097]
	},
	{
		name: '吉安市',
		cp: [114.986373, 27.111699]
	},
	{
		name: '上饶市',
		cp: [117.971185, 28.44442]
	},
	{
		name: '九江市',
		cp: [115.992811, 29.712034]
	},
	{
		name: '抚州市'
	}, {
		cp: [116.358351, 27.98385]
	},
	{
		name: '宜春市',
		cp: [114.391136, 27.8043]
	},
	{
		name: '南昌市',
		cp: [115.892151, 28.676493]
	},
	{
		name: '景德镇市',
		cp: [117.214664, 29.29256]
	},
	{
		name: '萍乡市',
		cp: [113.852186, 27.622946]
	},
	{
		name: '鹰潭市',
		cp: [117.033838, 28.238638]
	},
	{
		name: '新余市',
		cp: [114.930835, 27.810834]
	}];

    var data = [{
            name: '赣州市',
            value: 199
        },
        {
            name: '吉安市',
            value: 39
        },
        {
            name: '上饶市',
            value: 152
        },
        {
            name: '九江市',
            value: 299
        },
        {
            name: '抚州市',
            value: 89
        },
        {
            name: '宜春市',
            value: 52
        },
        {
            name: '南昌市',
            value: 9
        },
        {
            name: '景德镇市',
            value: 352
        },
        {
            name: '萍乡市',
            value: 99
        },
        {
            name: '鹰潭市',
            value: 39
        },
        {
            name: '新余市',
            value: 480
        },
    ];
    var max = 480,
        min = 9; // todo 
    var maxSize4Pin = 100,
        minSize4Pin = 20;

    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[i].cp;
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };


    var option = {
        title: {
            text: '“绿色金融” - 江西省',
            subtext: '',
            x: 'center',
            textStyle: {
                color: '#000000' //title颜色
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                if (typeof(params.value)[2] == "undefined") {
                    return params.name + ' : ' + params.value;
                } else {
                    return params.name + ' : ' + params.value[2];
                }
            }
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['credit_pm2.5'],
            textStyle: {
                color: '#fff'
            }
        },
        visualMap: {
            show: false,
            min: 0,
            max: 500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
                // color: ['#3B5077', '#031525'] // 蓝黑
                //  color: ['#ffc0cb', '#800080'] // 红紫
                // color: ['#3C3B3F', '#605C3C'] // 黑绿
                // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                color: ['#8dccff', '#31a2ff', '#0057e2'] // 紫红
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#1488CC', '#2B32B2'] // 浅蓝
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿

            }
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //             dataView: {readOnly: false},
        //             restore: {},
        //             saveAsImage: {}
        //             }
        // },
        geo: {
            show: true,
            map: 'jiangxi',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#FFFFFF',//地图周围颜色线
                },
                emphasis: {
                    areaColor: '#2B91B7',
                }
            }
        },
        series: [{
                name: 'credit_pm2.5',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: function(val) {
                    return val[2] / 10;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#000000'
                    }
                }
            },
            {
                type: 'map',
                map: 'jiangxi',
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077',
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false,
                data: data
            },
            {
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin',
                symbolSize: function(val) {
                    var a = (maxSize4Pin - minSize4Pin) / (max - min);
                    var b = minSize4Pin - a * min;
                    b = maxSize4Pin - a * max;
                    return a * val[2] + b;
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 9,
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#0057e2', //标志气泡颜色
                    }
                },
                zlevel: 6,
                data: convertData(data),
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data.sort(function(a, b) {
                    return b.value - a.value;
                }).slice(0, 5)),
                symbolSize: function(val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#F0E68C',
                        shadowBlur: 10,
                        shadowColor: '#FFA500'
                    }
                },
                zlevel: 1
            },

        ]
    };
    myChart.setOption(option);
});

2、效果图

3、改编【1、我们要下载json到对应的存储位置assets/get/s/x.json】2、传入json文件名称渲染获取对应数据页面 3、传入geoCoordMap【来源于$Json返回的features】和data数据

geoCoordMap例子

var geoCoordMap = {
                '赣州市':[114.940278,25.85097],
                '吉安市':[114.986373,27.111699],
                '上饶市':[117.971185,28.44442],
                '九江市':[115.992811,29.712034],
                '抚州市':[116.358351,27.98385],
                '宜春市':[114.391136,27.8043],
                '南昌市':[115.892151,28.676493],
                '景德镇市':[117.214664,29.29256],
                '萍乡市':[113.852186,27.622946],
                '鹰潭市':[117.033838,28.238638],
                '新余市':[114.930835,27.810834],
            }

data例子

var data = [
                {name: '赣州市', value: 199},
                {name: '吉安市', value: 39},
                {name: '上饶市', value: 152},
                {name: '九江市', value: 299},
                {name: '抚州市', value: 89},
                {name: '宜春市', value: 52},
                {name: '南昌市', value: 9},
                {name: '景德镇市', value: 352},
                {name: '萍乡市', value: 99},
                {name: '鹰潭市', value: 39},
                {name: '新余市', value: 480},
            ];

  • 完整demo--传入不同的行政区code自动生成对应的echarts地图

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

/**
 * @Description : 项目GitHubMap地址：https://github.com/apache/incubator-echarts/tree/master/map
 * @DemoUrl：https://gallery.echartsjs.com/editor.html?c=xBkVnciA0b
 * @Auth : Xuhy
 * @Date : 2019/6/29
 * @Time : 10:10
 */
@Component({
    selector: 'app-demo1',
    templateUrl: './demo1.component.html',
})
export class Demo1Component implements OnInit {

    provincesDownLoadPath = [
        {provinceName: '中国', pinyin: 'zhongguo', childNum: '0'},
        {provinceName: '北京市', pinyin: 'beijing', childNum: '11'},
        {provinceName: '天津市', pinyin: 'tianjin', childNum: '12'},
        {provinceName: '河北省', pinyin: 'hebei', childNum: '13'},
        {provinceName: '山西省', pinyin: 'shanxi', childNum: '14'},
        {provinceName: '内蒙古自治区', pinyin: 'neimenggu', childNum: '15'},
        {provinceName: '辽宁省', pinyin: 'liaoning', childNum: '21'},
        {provinceName: '吉林省', pinyin: 'jilin', childNum: '22'},
        {provinceName: '黑龙江省', pinyin: 'heilongjiang', childNum: '23'},
        {provinceName: '上海市', pinyin: 'shanghai', childNum: '31'},
        {provinceName: '江苏省', pinyin: 'jiangsu', childNum: '32'},
        {provinceName: '浙江省', pinyin: 'zhejiang', childNum: '33'},
        {provinceName: '安徽省', pinyin: 'anhui', childNum: '34'},
        {provinceName: '福建省', pinyin: 'fujian', childNum: '35'},
        {provinceName: '江西省', pinyin: 'jiangxi', childNum: '36'},
        {provinceName: '山东省', pinyin: 'shangdong', childNum: '37'},
        {provinceName: '河南省', pinyin: 'henan', childNum: '41'},
        {provinceName: '湖北省', pinyin: 'hubei', childNum: '42'},
        {provinceName: '湖南省', pinyin: 'hunan', childNum: '43'},
        {provinceName: '广东省', pinyin: 'guangdong', childNum: '44'},
        {provinceName: '广西壮族自治区', pinyin: 'guangxi', childNum: '45'},
        {provinceName: '海南省', pinyin: 'hainan', childNum: '46'},
        {provinceName: '重庆市', pinyin: 'chongqing', childNum: '50'},
        {provinceName: '四川省', pinyin: 'sichuan', childNum: '51'},
        {provinceName: '贵州省', pinyin: 'guizhou', childNum: '52'},
        {provinceName: '云南省', pinyin: 'yunnan', childNum: '53'},
        {provinceName: '西藏自治区', pinyin: 'xizang', childNum: '54'},
        {provinceName: '陕西省', pinyin: 'shanxi', childNum: '61'},
        {provinceName: '甘肃省', pinyin: 'gansu', childNum: '62'},
        {provinceName: '青海省', pinyin: 'qinghai', childNum: '63'},
        {provinceName: '宁夏回族自治区', pinyin: 'ningxia', childNum: '64'},
        {provinceName: '新疆维吾尔自治区', pinyin: 'xingjiang', childNum: '65'}
    ];


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

    ngOnInit() {
        var xzq_code = '36';
        const echarts = this.nes.echarts;
        var myChart = echarts.init(document.getElementById('echarts-map'));

        this.provincesDownLoadPath.forEach((p, index) => {
            if (p.childNum === xzq_code) {
                var provinceName = p.provinceName;
                var jsonName = p.pinyin;

                this.ChartData(jsonName, myChart, echarts, provinceName);
            }
        });


    }

    private ChartData(jsonName: string, myChart, echarts, provinceName: string) {
        var geoCoordMap = [];
        var data = [];

        var uploadedDataURL = `assets/get/s/${jsonName}.json`;
        myChart.showLoading();

        $.getJSON(uploadedDataURL, function (geoJson) {

            echarts.registerMap(jsonName, geoJson);
            myChart.hideLoading();

            geoJson.features.forEach((feature, index) => {
                var properties = feature.properties;
                var cp = properties.cp;
                var name = properties.name;

                geoCoordMap.push({name: name, cp: cp});
                //--------注意data是外界ajax请求返回数据，如果要看效果，则将接口修改一下不传入data，下方100为假数据------
                data.push({name: name, value: 100});
            });

            var max = 480, min = 9; // todo
            var maxSize4Pin = 100, minSize4Pin = 20;

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[i].cp;
                    // var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
            var option = {
                title: {
                    text: `${provinceName}`,
                    subtext: '',
                    x: 'center',
                    textStyle: {
                        color: '#000000'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (typeof(params.value)[2] == 'undefined') {
                            return params.name + ' : ' + params.value;
                        } else {
                            return params.name + ' : ' + params.value[2];
                        }
                    }
                },
                legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: ['credit_pm2.5'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        // color: ['#3B5077', '#031525'] // 蓝黑
                        // color: ['#ffc0cb', '#800080'] // 红紫
                        // color: ['#3C3B3F', '#605C3C'] // 黑绿
                        // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                        color: ['#8dccff', '#31a2ff', '#0057e2'] // 紫红
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#1488CC', '#2B32B2'] // 浅蓝
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                    }
                },
                // toolbox: {
                //     show: true,
                //     orient: 'vertical',
                //     left: 'right',
                //     top: 'center',
                //     feature: {
                //             dataView: {readOnly: false},
                //             restore: {},
                //             saveAsImage: {}
                //             }
                // },
                geo: {
                    show: true,
                    map: jsonName,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#FFFFFF',
                        },
                        emphasis: {
                            areaColor: '#2B91B7',
                        }
                    }
                },
                series: [
                    {
                        name: 'credit_pm2.5',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#000000'
                            }
                        }
                    },
                    {
                        type: 'map',
                        map: jsonName,
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#3B5077',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        animation: false,
                        data: data
                    },
                    {
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: function (val) {
                            var a = (maxSize4Pin - minSize4Pin) / (max - min);
                            var b = minSize4Pin - a * min;
                            b = maxSize4Pin - a * max;
                            return a * val[2] + b;
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 9,
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#0057e2', //标志气泡颜色
                            }
                        },
                        zlevel: 6,
                        data: convertData(data),
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 5)),
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F0E68C',
                                shadowBlur: 10,
                                shadowColor: '#FFA500'
                            }
                        },
                        zlevel: 1
                    },
                ]
            };
            myChart.setOption(option);
        });
    }
}
  • html
<div style="width: 1000px; height: 1000px; " id="echarts-map"></div>
winner_corl
发布了206 篇原创文章 · 获赞 49 · 访问量 14万+
私信 关注

猜你喜欢

转载自blog.csdn.net/Sicily_winner/article/details/94157001
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022