echarts案例之日历

一、此案例基于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,

        },

三、完整代码如下：

<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>