在项目中需要使用到日历分析显示数据,官网的案例是这样的:
需求:根据每日的数据显示自定义的颜色。
查询官方API,通过设置属性 visualMap.pieces 和 visualMap.inRange ,设置渐变色和颜色深浅度数。
直接上代码分析:
var myChart = echarts.init(document.getElementById("container"));
myChart.clear();
var option;
var dateList = [];
var heatmapData = [];
var lunarData = [];
for (var i = 0; i < dateList.length; i++) {
heatmapData.push([
dateList[i][0],
50000 + Math.round(Math.random() * 8000)
]);
lunarData.push([
dateList[i][0],
1,
]);
}
option = {
tooltip: {
formatter: function (params) {
return '污染度: ' + params.value[1];
}
},
visualMap: {
type: 'piecewise',
calculable: true,
seriesIndex: [2],
orient: 'horizontal',
left: 'center',
bottom: 100,
inRange: {
opacity: 0.35
},
pieces: [
{ gte: 56000, color: '#f31b21' },
{ gte: 55000, lte: 56000, color: '#E4881D' },
{ gte: 54000, lte: 55000, color: '#2c8ce7' },
{ gte: 53000, lte: 54000, color: '#24B1BA' },
{ lte: 53000, color: '#3DB676' }],
textStyle: {
color: '#000'
}
},
calendar: [{
left: 'center',
top: 'middle',
cellSize: [65, 60],
yearLabel: {show: false},
orient: 'vertical',
dayLabel: {
firstDay: 1,
nameMap: 'cn'
},
monthLabel: {
show: false
},
range: '2017-03'
}],
series: [{
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
show: true,
formatter: function (params) {
var d = echarts.number.parseDate(params.value[0]);
return d.getDate();
},
color: '#000'
},
data: lunarData
},
{
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
show: true,
formatter: function (params) {
return '\n\n\n' + (params.value[2] || '');
},
fontSize: 14,
color: '#a00'
},
data: lunarData
},
{
name: '降雨量',
type: 'heatmap',
coordinateSystem: 'calendar',
data: heatmapData
}]
};
最后效果图:
总结:
之前试着只设置 visualMap.inRange中的color属性,只是会将颜色根据echats的样式来改变颜色。
想要自定义颜色,解决方法就是在属性 visualMap.inRange 设置区域颜色。
以上。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)