使用echarts画日历热力图

个人笔记整理，详细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;
}

效果图：

使用echarts画日历热力图相关推荐

使用echarts画日历热力图自定义区间颜色值
个人笔记整理,详细API介绍请参照echarts官网. HTML页面 <!DOCTYPE html> <html lang="en"> <head&g ...
matlab怎么画二维热力图_Tableau画日历热力图
有时候,我们需要对每一天天气情况进行分析,而如何能够一眼直观的可以看出当月某一天的AQI值和相对其他天的情况呢,就需要我们对其进行可视化,接下来就选择一个比较适合的图对我们来说是至关重要的.因此,通过 ...
python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)
首先安装对应的python模块 $ pip install pyecharts==0.5.10 $ pip install echarts-countries-pypkg $ pip install ...
详解python 利用 pyecharts 画地图(热力图)(世界地图，省市地图，区县地图)、动态流向图
转载: 详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图) Pyecharts绘制全球流向图 pyecharts中文教程官网目录安装对应的python模块世界 ...
python echarts 热力图_pyecharts日历热力图
pyecharts是一个用于生成 Echarts 图表的类库 Echarts 是百度开源的一个数据可视化 JS 库 pyecharts中文文档 pyecharts已发布1.0版本,绘图部分代码已经重构 ...
python 日历热力图_pyecharts日历热力图
pyecharts是一个用于生成 Echarts 图表的类库 Echarts 是百度开源的一个数据可视化 JS 库 pyecharts中文文档 pyecharts已发布1.0版本,绘图部分代码已经重构 ...
手把手教你用ECharts画饼图和环形图
导读:饼图也是一种常用的基本图表,主要用来展示各项的比重. 作者:王大伟来源:大数据DT(ID:hzdashuju) 下面制作一幅基础的饼图,将Echarts中series的type参数值设置为pi ...
echarts画中国地图！
今天,我们迎来了冬至节气,大家今天吃了什么呀?我想着今天冬至,应该吃一碗饺子,于是去了一家饺子馆,到了那里人惊呆了,真的太多人了!!我随手拍了一张,氛围十分不错,有过年的味道了. 上图为武汉某饺子馆冬 ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...

使用echarts画日历热力图

使用echarts画日历热力图相关推荐

最新文章

热门文章