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'.
0
votes
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)
}
};