Echarts热力图怎样调整颜色映射

发布时间:2025-04-14 21:31:36 作者:小樊
来源:亿速云 阅读:104

ECharts 热力图的颜色映射可以通过设置 visualMap 组件来实现。visualMap 组件可以在图表中创建一个视觉映射区域,将数据映射到颜色上。以下是一个简单的示例:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'category',
        data: ['Morning', 'Afternoon', 'Evening']
    },
    visualMap: {
        min: 0,
        max: 100,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%',
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },
    series: [{
        name: '热力图',
        type: 'heatmap',
        data: [
            // 数据数组
        ],
        label: {
            show: false
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

在这个示例中,我们设置了 visualMap 组件的 minmax 值,以及一个颜色数组 inRange。颜色数组中的颜色将根据数据值在 minmax 之间进行映射。你可以根据需要自定义颜色数组。

注意:在实际使用中,你需要将数据数组填充到 series 中的 data 属性里。数据数组的格式应该是一个二维数组,例如:

data: [
    [10, 20, 30],
    [20, 30, 40],
    [30, 40, 50]
]

这样,热力图就会根据数据值和颜色数组进行颜色映射。

推荐阅读:
  1. django怎么引用echarts
  2. 报表怎么集成echarts官网

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

echarts

上一篇:ES6的迭代器协议怎么实现

下一篇:Echarts折线图如何添加标记点

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》