echarts 叠加地图区域板块颜色

最新推荐文章于 2025-05-14 15:10:36 发布

fk129

最新推荐文章于 2025-05-14 15:10:36 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/qq_36061522/article/details/82984810

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文介绍使用ECharts进行地图数据可视化的实现过程，通过设置不同的数据范围和颜色，展示吉林省各城市的数据分布情况，实现动态地图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myChart = echarts.init(document.getElementById('main'));
        var option = {
        	// 区间  颜色 设置
            dataRange: {
                x: 'left',
                y: 'bottom',
                splitList: [
                    {start: 10000},
                    {start: 5000, end: 10000},
                    {start: 1000, end: 5000},
                    {start: 500, end: 1000},
                    {start: 100, end: 500},
                    {start: 0, end: 100}
                ],
                color: ['#f35000', '#f39800', '#9977e4', '#2ec8ca', '#2063cc', '#284b83']
            },
            series: [{
                type: 'map',
                mapType: name,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#389BB7',
                        areaColor: '#fff',
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                },
                animation: true,
                data: [
                    {name:'白城市',value:10000},
                    {name:'松原市',value:1000},
                    {name:'长春市',value:6000},
                    {name:'四平市',value:200},
                    {name:'吉林市',value:50000},
                    {name:'辽源市',value:8000},
                    {name:'通化市',value:10},
                    {name:'白山市',value:10000},
                    {name:'延边朝鲜族自治州',value:700},
                ]

            }]
        }
       $.get(url, function(geoJson) {

        echarts.registerMap(name, geoJson);
        myChart.setOption(option);

    });