前言
实现效果:使用 Echarts日历热力图
效果图
示例:
代码示例
var data = [
['2023/7/1', 43],
['2023/7/2', 89],
['2023/7/3', 23],
['2023/7/4', 32],
['2023/7/5', 43],
['2023/7/6', 2],
['2023/7/7', 23],
['2023/7/8', 65],
['2023/7/9', 8],
['2023/7/10', 7],
['2023/7/11', 76],
['2023/7/12', 45],
['2023/7/13', 45],
['2023/7/14', 65],
['2023/7/15', 56],
['2023/7/16', 65],
['2023/7/17', 56],
['2023/7/18', 57],
['2023/7/19', 23],
['2023/7/20', 23],
['2023/7/21', 34],
['2023/7/22', 26],
['2023/7/23', 23],
['2023/7/24', 58],
['2023/7/25', 37],
['2023/7/26', 56],
['2023/7/27', 23],
['2023/7/28', 23],
['2023/7/29', 23],
['2023/7/30', 23],
['2023/7/31', 12]
]
option = {
backgroundColor: '#0A2337',
tooltip: {
trigger: 'item',
formatter: '{a}<br/>{c}',
},
calendar: [{
top: 90,
left: 'center',
range: ['2023-07-01', '2023-07-31'], //日历范围
orient: 'vertical',
cellSize: [78, 'auto'], //宽 高
splitLine: {
show: false,
},
dayLabel: {
show: true,
//firstDay: 1, // 一周从周几开始,默认从周日开始
nameMap: 'EN', // 星期显示的效果,默认为'en'
margin: 10,
color: '#fff'
},
monthLabel: {
show:false
},
yearLabel: {
show: false
},
itemStyle: {
normal: {
color: '#0A2237',
borderWidth: 2,
borderColor: 'transparent' // 日历边框颜色
}
}
}],
series: [{
type: 'effectScatter',
coordinateSystem: 'calendar',
data: data,
symbolSize: () => Math.max(~~(Math.random() * 15), 5),
itemStyle: {
normal: {
color: 'red' //更改热力图的颜色
}
},
label: {
show: true,
formatter(params) {
return params.value[0].split('/')[2] //展示的日历内容
},
offset: [10, -10], //字体在表格的位置
color: '#fff' // 字体颜色
}
}]
};
Ending…