{
"tooltip": {
"position": "top",
"formatter": function (p) { var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]); return format + ': ' + p.data[1]; }
},
"calendar": [
{
"orient": "vertical",
"dayLabel": {
"firstDay": 1,
"nameMap": []
},
"monthLabel": {
"show": false
},
"yearLabel": {
"show": false
},
"itemStyle": {
"borderWidth": 15,
"borderColor": "rgba(0,0,0,1)",
"color": "#4D96E3"
},
"splitLine": {
"show": false
},
"cellSize": [
"50",
"50"
],
"range": "2021-11"
}
],
"series": [
{
"type": "custom",
"coordinateSystem": "calendar",
"renderItem": function (params, api) { const cellPoint = api.coord(api.value(0)); const cellWidth = params.coordSys.cellWidth; const cellHeight = params.coordSys.cellHeight; const value = api.value(1); if (isNaN(cellPoint[0]) || isNaN(cellPoint[1])) { return; } const group = { type: 'group', children: [ { type: 'text', style: { x: cellPoint[0], y: cellPoint[1] - cellHeight / 2 + 25, text: echarts.format.formatTime('dd', api.value(0)), fill: '#fff', width: '35', height: '35', textAlign: 'center', verticalAlign: 'center', textFont: api.font({ fontSize: 16 }), backgroundColor: api.value(2) ? '#41ABEB' : '#125791' } }, { type: 'text', style: { x: cellPoint[0] + 20, y: cellPoint[1] - cellHeight / 2 + 10, text: value, fill: '#fff', backgroundColor: !value ? '' : 'orange', width: '20', height: '20', fontSize: '14', textAlign: 'center', verticalAlign: 'center', borderWidth: '1' } } ] }; return group; },
"dimensions": [
null,
{
"type": "ordinal"
}
],
"data": [
[
"2021-11-01",
"3",
1
],
[
"2021-11-02",
"3",
1
],
[
"2021-11-03",
"3",
1
],
[
"2021-11-04",
"3",
1
],
[
"2021-11-05",
"",
1
],
[
"2021-11-06",
"",
0
],
[
"2021-11-07",
"",
1
],
[
"2021-11-08",
"",
1
],
[
"2021-11-09",
"",
1
],
[
"2021-11-10",
"3",
0
],
[
"2021-11-11",
"",
1
],
[
"2021-11-12",
"",
1
],
[
"2021-11-13",
"",
0
],
[
"2021-11-14",
"",
1
],
[
"2021-11-15",
"",
1
],
[
"2021-11-16",
"",
1
],
[
"2021-11-17",
"",
1
],
[
"2021-11-18",
"",
0
],
[
"2021-11-19",
"",
1
],
[
"2021-11-20",
"",
1
],
[
"2021-11-21",
"",
1
],
[
"2021-11-22",
"",
0
],
[
"2021-11-23",
"6",
1
],
[
"2021-11-24",
"",
1
],
[
"2021-11-25",
"",
1
],
[
"2021-11-26",
"",
1
],
[
"2021-11-27",
"",
0
],
[
"2021-11-28",
"",
0
],
[
"2021-11-29",
"",
1
],
[
"2021-11-30",
"",
1
]
]
}
]
}效果
其实type不一定要是scatter，日期和badge分开写，然后用一样的数据，只是取值不一样，这个方法参考了这篇博客：
Echarts 表格热力图文字根据数据范围设置不同的颜色_jimjiayu-CSDN博客
type:heatmap是日期层
{
"tooltip": {
"position": "top",
"formatter": function (p) { var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]); return format + ': ' + p.data[1]; }
},
"visualMap": [
{
"type": "piecewise",
"splitNumber": 2,
"pieces": [
{
"value": 1,
"label": "使用中",
"color": "#41ABEB"
},
{
"value": 0,
"label": "空闲",
"color": "#125791"
}
],
"show": false
}
],
"calendar": [
{
"orient": "vertical",
"range": "2015-01",
"dayLabel": {
"margin": 5,
"show": false
},
"monthLabel": {
"show": false
},
"yearLabel": {
"show": false
},
"itemStyle": {
"borderWidth": 15,
"borderColor": "rgba(0,0,0,1)"
},
"splitLine": {
"show": false
},
"cellSize": [
"50",
"50"
]
}
],
"series": [
{
"type": "heatmap",
"coordinateSystem": "calendar",
"label": {
"fontSize": 14,
"show": true,
"formatter": function (params) { return echarts.format.formatTime('dd', params.value[0]); },
"color": "#fff"
},
"itemStyle": {
"color": "#125791"
},
"data": [
[
"2015-01-01",
"",
1
],
[
"2015-01-02",
958,
0
],
[
"2015-01-03",
821,
1
],
[
"2015-01-04",
554,
1
],
[
"2015-01-05",
36,
1
],
[
"2015-01-06",
"",
1
],
[
"2015-01-07",
"",
1
],
[
"2015-01-08",
"",
1
],
[
"2015-01-09",
819,
0
],
[
"2015-01-10",
"",
1
],
[
"2015-01-11",
886,
1
],
[
"2015-01-12",
"",
1
],
[
"2015-01-13",
692,
1
],
[
"2015-01-14",
778,
0
],
[
"2015-01-15",
78,
0
],
[
"2015-01-16",
"",
1
],
[
"2015-01-17",
547,
1
],
[
"2015-01-18",
"",
1
],
[
"2015-01-19",
256,
1
],
[
"2015-01-20",
572,
1
],
[
"2015-01-21",
"",
1
],
[
"2015-01-22",
"",
1
],
[
"2015-01-23",
"",
1
],
[
"2015-01-24",
567,
1
],
[
"2015-01-25",
"",
1
],
[
"2015-01-26",
"",
0
],
[
"2015-01-27",
289,
0
],
[
"2015-01-28",
226,
1
],
[
"2015-01-29",
"",
1
],
[
"2015-01-30",
978,
1
],
[
"2015-01-31",
53,
1
]
]
},
{
"type": "scatter",
"coordinateSystem": "calendar",
"symbolSize": 1,
"label": {
"show": true,
"formatter": function (params) { if (params.value[1] == ''){ return '{a|' + params.value[1] + '}'; }else{ return '{b|' + params.value[1] + '}'; } },
"rich": {
"a": {
"backgroundColor": ""
},
"b": {
"backgroundColor": "#FFA500",
"width": "100%",
"height": "20",
"align": "center"
}
},
"width": "22",
"offset": [
16,
-20
],
"fontSize": 12,
"color": "#fff",
"opacity": 1
},
"data": [
[
"2015-01-01",
"",
1
],
[
"2015-01-02",
958,
0
],
[
"2015-01-03",
821,
1
],
[
"2015-01-04",
554,
1
],
[
"2015-01-05",
36,
1
],
[
"2015-01-06",
"",
1
],
[
"2015-01-07",
"",
1
],
[
"2015-01-08",
"",
1
],
[
"2015-01-09",
819,
0
],
[
"2015-01-10",
"",
1
],
[
"2015-01-11",
886,
1
],
[
"2015-01-12",
"",
1
],
[
"2015-01-13",
692,
1
],
[
"2015-01-14",
778,
0
],
[
"2015-01-15",
78,
0
],
[
"2015-01-16",
"",
1
],
[
"2015-01-17",
547,
1
],
[
"2015-01-18",
"",
1
],
[
"2015-01-19",
256,
1
],
[
"2015-01-20",
572,
1
],
[
"2015-01-21",
"",
1
],
[
"2015-01-22",
"",
1
],
[
"2015-01-23",
"",
1
],
[
"2015-01-24",
567,
1
],
[
"2015-01-25",
"",
1
],
[
"2015-01-26",
"",
0
],
[
"2015-01-27",
289,
0
],
[
"2015-01-28",
226,
1
],
[
"2015-01-29",
"",
1
],
[
"2015-01-30",
978,
1
],
[
"2015-01-31",
53,
1
]
]
}
],
"xAxis": {
"type": "category",
"data": [
"1",
"2",
"3",
"4",
"5",
"6",
"7"
],
"splitArea": {
"show": true
},
"show": false
},
"yAxis": {
"type": "category",
"data": [
"1",
"2",
"3",
"4",
"5"
],
"splitArea": {
"show": true
},
"show": false
}
} badge层主要就是rich定制样式，formatter判断添加badge的背景色
要注意的是背景色不要加在formatter外，那是写死的
动态数据不更新问题
吧series里两个{xxx}对调就好了
{
"tooltip": {
"position": "top",
"formatter": function (p) { var format = echarts.format.formatTime('yyyy-MM-dd', p.data[0]); return format + ': ' + p.data[1]; }
},
"visualMap": [
{
"type": "piecewise",
"splitNumber": 2,
"pieces": [
{
"value": 1,
"label": "使用中",
"color": "#41ABEB"
},
{
"value": 0,
"label": "空闲",
"color": "#125791"
}
],
"show": false
}
],
"calendar": [
{
"orient": "vertical",
"range": "2015-01",
"dayLabel": {
"margin": 5,
"show": false
},
"monthLabel": {
"show": false
},
"yearLabel": {
"show": false
},
"itemStyle": {
"borderWidth": 15,
"borderColor": "rgba(0,0,0,1)"
},
"splitLine": {
"show": false
},
"cellSize": [
"50",
"50"
]
}
],
"series": [
{
"type": "scatter",
"coordinateSystem": "calendar",
"symbolSize": 1,
"label": {
"show": true,
"formatter": function (params) { if (params.value[1] == ''){ return '{a|' + params.value[1] + '}'; }else{ return '{b|' + params.value[1] + '}'; } },
"rich": {
"a": {
"backgroundColor": ""
},
"b": {
"backgroundColor": "#FFA500",
"width": "100%",
"height": "20",
"align": "center"
}
},
"width": "22",
"offset": [
16,
-20
],
"fontSize": 12,
"color": "#fff",
"opacity": 1
},
"data": [
[
"2015-01-01",
"",
1
],
[
"2015-01-02",
958,
0
],
[
"2015-01-03",
821,
1
],
[
"2015-01-04",
554,
1
],
[
"2015-01-05",
36,
1
],
[
"2015-01-06",
"",
1
],
[
"2015-01-07",
"",
1
],
[
"2015-01-08",
"",
1
],
[
"2015-01-09",
819,
0
],
[
"2015-01-10",
"",
1
],
[
"2015-01-11",
886,
1
],
[
"2015-01-12",
"",
1
],
[
"2015-01-13",
692,
1
],
[
"2015-01-14",
778,
0
],
[
"2015-01-15",
78,
0
],
[
"2015-01-16",
"",
1
],
[
"2015-01-17",
547,
1
],
[
"2015-01-18",
"",
1
],
[
"2015-01-19",
256,
1
],
[
"2015-01-20",
572,
1
],
[
"2015-01-21",
"",
1
],
[
"2015-01-22",
"",
1
],
[
"2015-01-23",
"",
1
],
[
"2015-01-24",
567,
1
],
[
"2015-01-25",
"",
1
],
[
"2015-01-26",
"",
0
],
[
"2015-01-27",
289,
0
],
[
"2015-01-28",
226,
1
],
[
"2015-01-29",
"",
1
],
[
"2015-01-30",
978,
1
],
[
"2015-01-31",
53,
1
]
]
},
{
"type": "heatmap",
"coordinateSystem": "calendar",
"label": {
"fontSize": 14,
"show": true,
"formatter": function (params) { return echarts.format.formatTime('dd', params.value[0]); },
"color": "#fff"
},
"itemStyle": {
"color": "#125791"
},
"data": [
[
"2015-01-01",
"",
1
],
[
"2015-01-02",
958,
0
],
[
"2015-01-03",
821,
1
],
[
"2015-01-04",
554,
1
],
[
"2015-01-05",
36,
1
],
[
"2015-01-06",
"",
1
],
[
"2015-01-07",
"",
1
],
[
"2015-01-08",
"",
1
],
[
"2015-01-09",
819,
0
],
[
"2015-01-10",
"",
1
],
[
"2015-01-11",
886,
1
],
[
"2015-01-12",
"",
1
],
[
"2015-01-13",
692,
1
],
[
"2015-01-14",
778,
0
],
[
"2015-01-15",
78,
0
],
[
"2015-01-16",
"",
1
],
[
"2015-01-17",
547,
1
],
[
"2015-01-18",
"",
1
],
[
"2015-01-19",
256,
1
],
[
"2015-01-20",
572,
1
],
[
"2015-01-21",
"",
1
],
[
"2015-01-22",
"",
1
],
[
"2015-01-23",
"",
1
],
[
"2015-01-24",
567,
1
],
[
"2015-01-25",
"",
1
],
[
"2015-01-26",
"",
0
],
[
"2015-01-27",
289,
0
],
[
"2015-01-28",
226,
1
],
[
"2015-01-29",
"",
1
],
[
"2015-01-30",
978,
1
],
[
"2015-01-31",
53,
1
]
]
},
],
"xAxis": {
"type": "category",
"data": [
"1",
"2",
"3",
"4",
"5",
"6",
"7"
],
"splitArea": {
"show": true
},
"show": false
},
"yAxis": {
"type": "category",
"data": [
"1",
"2",
"3",
"4",
"5"
],
"splitArea": {
"show": true
},
"show": false
}
}