echarts地图 根据数据显示不同的颜色

本文介绍了如何利用Echarts的visualMap组件进行数据的视觉编码,特别是通过piecewise分段实现不同颜色区间映射数据。示例中展示了中国各省份的数据分布,从大到小排列,并用不同颜色表示数据大小。代码示例详细说明了数据处理和配置选项,包括颜色区间设置、地图类型、数据绑定等,帮助读者理解如何创建一个动态的地图数据可视化应用。
摘要由CSDN通过智能技术生成

visualMap 是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)

piecewise 分段

var province = ['福建', '江苏', '浙江', '安徽', '广东', '北京', '山东', '上海', '辽宁', 
'四川', '河北', '河南', '湖南', '山西', '江西', '内蒙古','湖北', '广西', '重庆', '天津',
'陕西',  '贵州', '宁夏', '云南','吉林','青海', '新疆','黑龙江', '甘肃', 
 '西藏', '海南'];
var data = [42, 41, 37, 33, 24, 23, 19, 
18, 13, 13, 10, 8, 8, 7, 7, 6, 6, 5,
5, 4, 4, 4, 3, 3, 3, 2, 
2, 2, 2, 0, 0]
var res = [];
for (var j = 0; j < data.length; j++) {
    res.push({
        name: province[j],
        value: data[j]
    });
}
res.sort(function(a, b) {
    return a.value - b.value;
});
var res1 = [];
var res2 = [];
for (var t = 0; t < 10; t++) {
    res1[t] = res[res.length - 1 - t].name;
    res2[t] = res[res.length - 1 - t].value;
}

var option = {
    visualMap: {
        type: 'piecewise',
        text: ['大', '小'],
        pieces: [{									// 颜色区间
                min: 41,				
                color: '#73240D'
            },
            {
                min: 31,
                max: 40,
                color: '#BB0000'
            },
          
            {
                min: 21,
                max:30,
                color: '#BD430A'
            },
            {
                min: 11,
                max: 20,
                color: '#E08150'
            },
            {
                min: 1,
                max: 10,
                color: '#E9B090'
            },
            {
                value: 0,
                color: '#ffffff'
            }
        ],
        textStyle: {
            color:'black'
        }
    },
    series: [{
            name: 'mapSer',
            type: 'map',
            map: 'china',
            roam: false,
            // geoIndex: 0,
            label: {
                show: false,
            },
            data: res				可以是后台传入的数据  
        }
    ]
};

res 的数据格式为:

const res = [
	{name:'区域名' ,value: 数量},
	{name:'区域名' ,value: 数量},
	{name:'区域名' ,value: 数量},
	{name:'区域名' ,value: 数量},
]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值