ionic开发的过程中遇到的问题及解决方法的整理（十）——echarts绘制日历

最新推荐文章于 2024-10-29 16:45:08 发布

原创最新推荐文章于 2024-10-29 16:45:08 发布 · 594 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ionic

ionic3开发

本文介绍了如何在Ionic项目中使用Echarts实现日历图表功能，包括通过Echarts的Calendar组件创建日历，以及自定义实现月份切换的方法。文章还分享了遇到的问题和解决策略，提供了实现日历图表的完整流程，适用于需要在移动端应用中展示日历数据的开发者。

前言
前段时间项目经理和我说要搞一个日历图表出来，思来想去最终还是决定用echarts去实现，上文提过echarts的基本运用方法（不了解的可以移步这里），这里就不在赘述。在这记录自己的实现过程与大家分享，有不当之处也希望大家可以指出。

引用

import echarts from 'echarts';

ionViewDidEnter（）{
	let lunarData = [];
	//获取当前年月
    this.months = new Date().getMonth() + 1;
    this.years = new Date().getFullYear();
    if (this.months < 10) {
      this.months = '0' + this.months;
    }
    this.titinfo = this.years.toString() + '-' + this.months.toString();
    
   let myChart = echarts.init(<HTMLDivElement>document.getElementById('puEcharts'));
   
   //循环日历时间
   let dates = +echarts.number.parseDate(this.years + '-01-01');
      let end = +echarts.number.parseDate(this.years + '-12-31');
      let dayTime = 3600 * 24 * 1000;
      let datas = [];
      for (let time = dates; time <= end; time += dayTime) {
        datas.push([
          echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(Math.random() * 10000)
        ]);
      }
	 
	 for (var i = 0; i < datas.length; i++) {
        lunarData.push([
          datas[i][0],
          1,
        ]);
      }

	 let option = {
        calendar: [{
          left: 'center',
          top: 'middle',
          cellSize: [40, 40],
          yearLabel: { show: false },
          orient: 'vertical',
          dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
          },
          monthLabel: {
            show: false
          },
          itemStyle: {
            normal: {
              borderWidth: 0
            }
          },
          splitLine: {
            show: false
          },
          range: this.titinfo//当前日历显示年月
        }],

        series: [{
          type: 'scatter',
          coordinateSystem: 'calendar',
          symbolSize: 1,
          label: {
            normal: {
              show: true,
              formatter: function(params) {
                var d = echarts.number.parseDate(params.value[0]);
                return d.getDate();
              },
              textStyle: {
                color: '#000',
                fontsize: 16
              }
            }
          },
          data: lunarData
        }]
      };
      myChart3.setOption(option);
}

成果图如下：
在这里插入图片描述