一、此案例基于Vue3+ts，效果展示：
二、单个属性的值：
1、visualMap.pieces 根据值自定义每个小块的颜色
pieces: [
{
min: 0, // 最小值
max: 20, // 最大值
label: '未统计',
color: 'rgba(27, 61, 71,1)',
},
{
min: 20,
max: 50,
label: '优',
color: '#22a9a5',
},
{
min: 50,
max: 70,
label: '中',
color: '#c6bb2a',
},
{
min: 70,
// max: 200,
label: '差',
color: '#a03e3e',
},
],
2、yearLabel、monthLabel、dayLabel 年月日
例如：
yearLabel: { show: false }, // 不显示年（月同理）
dayLabel: {
firstDay: 1, // 设置第一天是几号
nameMap: 'cn',
color: '#407781',
},
3、range 范围（数组）
数组里面是月份，格式如下：
range: ['2023-01'],
4、splitLine.lineStyle.color
将日历外层边框颜色设为透明色，并且将边框的颜色和背景保持一致，就能实现格与格的间隔
splitLine: {
lineStyle: {
color: 'transparent', // 设置日历外层边框颜色
},
},
itemStyle: {
borderColor: '#0e2029',
borderWidth: 4,
},
三、完整代码如下：
<template>
<div class="container" ref="barRef"></div>
</template>
<script setup lang="ts" name="airWallQualityStatistics-calendar">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { formatDate } from '/@/utils/formatTime';
const barRef = ref();
let myChart: any = null; // echarts实例对象
onMounted(() => {
initCharts();
});
// 变化尺寸
const onResize = (resize: any) => {
console.log('resize: ', resize);
myChart && myChart.resize();
};
window.addEventListener('resize', onResize);
const initCharts = () => {
// 获取当前月(格式'2023-01')
let time = formatDate(new Date(), 'YYYY-mm');
// 对应值的数组
let maxArr = [];
//获取当前年
const year = new Date(time).getFullYear();
//获取当前月
let month = new Date(time).getMonth() + 1;
//新建日期数组(日期+值)
const datas = [];
//获取当前年月日期最大天数
const dataLength = new Date(year, month).toJSON().substring(0, 10).split('-')[2];
for (let i = 0; i < Number(dataLength); i++) {
let months = month >= 10 ? month : '0' + month;
let day = i + 1 >= 10 ? i + 1 : '0' + (i + 1);
datas.push({ date: year + '-' + months + '-' + day, total: Math.floor(Math.random() * 100) }); //存入数组
}
let chartData: any = [];
datas.forEach((item) => {
maxArr.push(item.total);
chartData.push({
value: [item.date, item.total],
});
});
let thisMonth = time; //当前月份
let option = {
tooltip: {
backgroundColor: 'rgba(69, 173, 175, 0.6)',
borderWidth: 0,
textStyle: {
color: '#fff',
fontSize: 14,
},
formatter: function (params: any) {
return '空气质量: ' + params.value[1];
},
},
visualMap: {
min: 0,
max: 100,
show: false,
pieces: [
{
min: 0,
max: 20,
label: '未统计',
color: 'rgba(27, 61, 71,1)',
},
{
min: 20,
max: 50,
label: '优',
color: '#22a9a5',
},
{
min: 50,
max: 70,
label: '中',
color: '#c6bb2a',
},
{
min: 70,
// max: 200,
label: '差',
color: '#a03e3e',
},
],
},
calendar: [
{
left: 'center',
bottom: '10',
cellSize: [35, 25],
yearLabel: { show: false }, // 是否显示月份
orient: 'vertical',
dayLabel: {
firstDay: 1,
nameMap: 'cn',
color: '#407781',
},
monthLabel: {
show: false,
},
range: [thisMonth],
itemStyle: {
borderColor: '#0e2029',
borderWidth: 4,
},
splitLine: {
lineStyle: {
color: 'transparent', // 设置日历外层边框颜色
},
},
},
],
series: [
{
type: 'scatter',
coordinateSystem: 'calendar',
label: {
show: true,
formatter: function (params: any) {
const d = echarts.number.parseDate(params.value[0]);
return d.getDate();
},
// color: '#52fffc',
color: '#fff',
},
data: chartData,
silent: true,
},
{
// name: '空气质量',
type: 'heatmap',
coordinateSystem: 'calendar',
data: chartData,
},
],
};
myChart = echarts.init(barRef.value as HTMLDivElement);
myChart.setOption(option, true);
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
}
</style>