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

最新推荐文章于 2025-09-14 14:51:17 发布

原创

最新推荐文章于 2025-09-14 14:51:17 发布 · 6.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

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

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,