在 eCharts 中更改热图中的颜色

Question

有什么方法可以更改 基于日历的热图 中的默认颜色？默认热图根据值从“黄色”到“红色”的阴影运行。我想更改颜色，使颜色从“red”变为“green”。

这是默认配色方案

Answer 1

使用属性“inRange”，您可以更改值的颜色变化。

function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate(year + '-12-31');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time <= end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 1000)
        ]);
    }
    return data;
}

option = {
    visualMap: {
        min: 0,
        max: 1000,
        inRange : {   
            color: ['#DD2000', '#009000' ] //From smaller to bigger value ->
        }
    },
    calendar: {
        range: '2017'
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtulData(2017)
    }
};

Answer 2

你也可以在visualMap中使用

  pieces: [
    {min: 0, max: 0.5, color: 'red'},        
    {min: 0.5, max: 1, color: 'green'},        
    ],

自定义更多

在 eCharts 中更改热图中的颜色

Changing the color in heatmap in eCharts

echarts