Changing the color in heatmap in eCharts

0
votes

Is there any way to change the default colors in a calendar-based heatmap? The default heatmap runs from shades of 'yellow' to 'red', based on the value. I want to change the colors so that the color runs from 'red' to 'green'.

This is the default color scheme enter image description here

1
echarts

1 Answers

3
votes

With the propriety "inRange" you can change the color variation of the values.

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)
    }
};