个人笔记整理，详细API介绍请参照echarts官网。
HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/index.js"></script>
<title>日历热力图Demo</title>
</head>
<body>
<div id="main1" style="width: 1400px;height:600px;border: 1px solid red"></div>
</body>
</html>js代码
$(function () {
drawMain1();
})
function drawMain1() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1'));
var mydate = new Date();
var year = mydate.getFullYear();
var first_half_year = getBetweenDay(year + '-01-01', year + '-06-30');
var second_half_year = getBetweenDay(year + '-07-01', year + '-12-31');
var maxValue = getMaxValue(first_half_year);
maxValue = getMaxValue(second_half_year, maxValue);
// 指定图表的配置项和数据
var option = {
title : {
top : 30,
left : 'center',
text : year + '年某人每天的步数'
},
tooltip: {
position: 'top',
formatter: function (params) {
return params.value[0] + '<br/>' + params.marker + '交易量:'
+ params.value[1];
}
},
visualMap: {
min: 0,
max: maxValue,
calculable: true,
align: 'bottom',
orient: 'horizontal',
left: 'center',
top: 'bottom',
bottom: -55,
inRange: {
//红蓝相间
// color:['#5A8BC7', '#7E9FB9', '#A3B5A9', '#C9CB9D', '#ECE191', '#FEDC88', '#FCC080', '#FBA279', '#F98673', '#F7676C']
//红色色系
color:['white', '#FFE9BB', '#FFD1A7', '#FFBB95', '#FFA383', '#FF8D70', '#FF745C', '#FF5C4A', '#FF4638', '#FF2E26', '#FF1812']
}
},
itemStyle: {
color: 'rgba(100,0,100,0.4)'
},
calendar: [{
top: 90,
left: 30,
right: 30,
cellSize: ['auto', 15],
range: [year + '-01-01', year + '-06-30'],
itemStyle: {
normal: {
borderWidth: 0.5
}
},
yearLabel: {
show: false
}
}, {
left: '5%',
right: '5%',
top: '55%',
yearLabel: {
show: false
},
range: [year + '-07-01', year + '-12-31'],
cellSize: ['auto', '15']
}],
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 0,
data: first_half_year
},
{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: second_half_year
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
// 获取指定日期间的所有日期
function getBetweenDay(begin, end) {
var betweenTimeArr = [];
var ab = begin.split('-');
var ae = end.split('-');
var db = new Date();
db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
var de = new Date();
de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
var unixDb = db.getTime();
var unixDe = de.getTime();
for (var k = unixDb; k <= unixDe;) {
betweenTimeArr.push([new Date(parseInt(k)).format(), Math.floor(Math.random() * 10000)]);
k = k + 24 * 60 * 60 * 1000;
}
return betweenTimeArr;
}
//获取日期
Date.prototype.format = function (pra) {
var s = '';
var mouth = (this.getMonth() + 1) >= 10 ? (this.getMonth() + 1)
: ('0' + (this.getMonth() + 1));
var day = this.getDate() >= 10 ? this.getDate() : ('0' + this.getDate());
s += this.getFullYear() + '-'; // 获取年份。
s += mouth + "-"; // 获取月份。
if (pra == "01") {
s += "01";
} else {
s += day; // 获取日。
}
return (s); // 返回日期。
};
/**
* 获取数据中的最大值
* @param {*} data 数据
* @param {*} maxValue 最大值
*/
function getMaxValue(data, maxValue) {
if (!maxValue) {
maxValue = 0;
}
for (var d in data) {
if (maxValue < data[d][1]) {
maxValue = data[d][1];
}
}
return maxValue;
}
效果图：
