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

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: 数量},
]

版权声明:本文为IT_iosers原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。