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,

        },

三、完整代码如下：