江苏省地图，根据数值大小显示地图颜色，添加visualMap配置

冷雨温喉

已于 2023-03-02 16:13:26 修改

阅读量1k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2022-10-13 10:05:14 首次发布

本文链接：https://blog.csdn.net/qq_36652782/article/details/127295801

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

仅做个人收藏记录。

$.ajax({
            type: 'get',
            url: '../data/320000.json',
            dataType: 'json',
            success: function (geoJson) {
                echarts.registerMap('jiangsusheng', geoJson);
                var chart = echarts.init(document.getElementById('overallChart2'));
                chart.setOption({
                    tooltip: {
                        trigger: "item",
                        show: false
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}： {c}'
                    },
                    visualMap: {
                        min: 800,
                        max: 50000,
                        text: ['高', '低'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#8dc1f1', '#0e31a4']
                        },
                        textStyle: {
                            color: '#fff'
                        },
                        left: 40,
                        bottom: 40
                    },
                    geo: [
                        // 叠地图
                        {
                            map: 'jiangsusheng',
                            top: '9%',
                            left: '9%',
                            aspectScale: 0.9,
                            zlevel: 4,
                            itemStyle: {
                                color: '#2760c3', // 背景
                                borderWidth: '1', // 边框宽度
                                borderColor: '#2760c3', // 边框颜色
                                shadowColor: '#2760c3',
                            },
                            emphasis: {
                                disabled: true
                            }
                        }
                    ],
                    series: [
                        {
                            name: '',
                            type: 'map',
                            zlevel: 6,
                            aspectScale: 0.9,
                            top: '7%',
                            selectedMode: false,
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    borderColor: '#37ebfd',
                                    shadowColor: '#64b2df',
                                    shadowBlur: 8,
                                    // shadowOffsetX: -3,
                                    // shadowOffsetY: -3,
                                    areaColor: {
                                        type: "radial",
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgba(255, 0, 0, 0.5)", // 0% 处的颜色
                                            }],
                                        globalCoord: false, // 缺省为 false
                                    },
                                }

                            },
                            label: {
                                show: true,
                                color: '#fff',
                                itemStyle: {
                                    color: '#fff'
                                }
                            },
                            map: 'jiangsusheng',
                            data: [
                                { name: '南京市', value: 20057.34 },
                                { name: '无锡市', value: 15477.48 },
                                { name: '徐州市', value: 31686.1 },
                                { name: '常州市', value: 6992.6 },
                                { name: '苏州市', value: 44045.49 },
                                { name: '南通市', value: 40689.64 },
                                { name: '连云港市', value: 37659.78 },
                                { name: '淮安市', value: 45180.97 },
                                { name: '盐城市', value: 55204.26 },
                                { name: '扬州市', value: 21900.9 },
                                { name: '镇江市', value: 4918.26 },
                                { name: '泰州市', value: 5881.84 },
                                { name: '宿迁市', value: 4178.01 }
                            ],
                            emphasis: {
                                disabled: false,
                                itemStyle: {
                                    areaColor: '#102a7d',
                                },
                                label: {
                                    show: true,
                                    color: '#fff',
                                    itemStyle: {
                                        color: '#2a4a69'
                                    },
                                }
                            }
                        }
                    ]
                });
            }
        });