echarts案例之日历

日历"/>

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,

        },

三、完整代码如下：

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