ecahrts日历记录数据，切换日期

效果图：

 

    <!-- 弹出echarts -->
    <el-dialog class="hdxxdjClass" :title="'活动信息登记'" :visible.sync="openStatisticsForm" width="1050px" append-to-body>
      <div class="timeSelect">
        <div class="leftTri el-icon-caret-left" @click="monthChange('-')"></div>
        <el-date-picker
          v-model="times"
          value-format=“yyyy-MM”
          type="month"
          placeholder="选择月份"
          prefix-icon="none"
          :clearable="false"
          style="width:116px"
          @change="monthChange">
        </el-date-picker>
        <div class="rightTri el-icon-caret-right" @click="monthChange('+')"></div>
      </div>
      <div class="weeks">
        <li>周一</li>
        <li>周二</li>
        <li>周三</li>
        <li>周四</li>
        <li>周五</li>
        <li>周六</li>
        <li>周日</li>
      </div>
      <div id='mychart' ref="mychart" style='height:600px;width:100%;margin:0px auto'></div>
    </el-dialog>

    <!-- 添加或修改外部人员登记对话框 -->
    <el-dialog :title="title" :visible.sync="openStatisticsForm2" width="500px" append-to-body>
      <el-form ref="statisticsForm" :model="form" :rules="statisticsRules" label-width="80px">
        <el-form-item v-show="false" label="防疫表编号" prop="userPcId">
          <el-input v-model="form.userPcId" placeholder="请输入防疫表编号" />
        </el-form-item>
        <el-form-item label="活动区域" prop="activityArea">
          <el-input v-model="form.activityArea" maxlength="128" placeholder="请输入活动区域" :disabled="inputBan(1)"/>
        </el-form-item>
        <el-form-item label="体温" prop="temperature">
          <el-input v-model="form.temperature" placeholder="请输入温度"
                    oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                    :disabled="inputBan(2)"/>
        </el-form-item>
        <el-form-item label="统计日期" prop="statisticsDate">
          <el-date-picker clearable
                          v-model="form.statisticsDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择统计日期"
                          disabled>
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitStatisticsForm">确 定</el-button>
        <el-button @click="cancelStatisticsForm">取 消</el-button>
      </div>
    </el-dialog>

    //月份变化
    monthChange(type){
      let year = this.dataShow.split('-')[0]
      let mon = this.dataShow.split('-')[1]
      if(type==='-'){
        if(mon == '01'){
          year--
          mon = 12
        }else{
           mon--
        }
        if(mon<10){
          mon = '0'+mon
        }
        this.dataShow = year +'-'+ mon
        this.times = new Date(this.dataShow)
        console.log(year,mon,this.dataShow);
        console.log(this.times);
      }else if(type==='+'){
        if(mon == '12'){
          year++
          mon = 1
        }else{
          mon++
        }
        if(mon<10){
          mon = '0'+mon
        }
        this.dataShow = year +'-'+ mon
        this.times = new Date(this.dataShow)
      }
      else{
        this.dataShow = this.times.slice(1,this.times.length-1)
        console.log('3',this.dataShow);
      }
      this.calendar()
    },
    //提交
    submitStatisticsForm() {
      const that = this
      this.$refs["statisticsForm"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateStatistics(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openStatisticsForm2 = false;
            });
          } else {
            addStatistics(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openStatisticsForm2 = false;
              that.getList()
              setTimeout(() => {
              that.calendar()
              }, 500);
            });
          }
        }
      });
    },
    //取消
    cancelStatisticsForm() {
      this.openStatisticsForm2 = false;
      this.resetStatisticsForm();
    },
    resetStatisticsForm() {
      this.form = {
        id: null,
        userPcId: null,
        activityArea: null,
        temperature: undefined,
        statisticsDate: null
      };
      this.resetForm("statisticsForm");
    },

 

    /* echarts日历 */
    calendar(){
      document.getElementById('mychart').innerHTML = ""
      document.getElementById("mychart").removeAttribute("_echarts_instance_");
      let that = this
      let date = new Date();
      let days = (new Date(date.getFullYear(),parseInt(date.getMonth()+1),0)).getDate();//当前月的天数
      let datamon =null//格式化的当前月份
      datamon = date.getFullYear()+'-' + parseInt(date.getMonth()+1)
      if(this.times == ''){
        this.times = new Date(datamon)
      }
      if(this.times != ''){
        that.dataList = []
        //填充空数据
        for(let i=1;i <= days+1;i++){
          if(i<10){
            that.dataList.push([this.dataShow+'-'+ '0'+i,'',''])
          }
          else{
            that.dataList.push([this.dataShow+'-'+i,'',''])
          }
        }
        /*  */
        //填充记录数据。dataList2数据 dataList空填充数据和最终数据。
        for(let i = 0;i<that.dataList2.length;i++){
          for(let j = 0;j<that.dataList.length;j++){
            if(that.dataList2[i][0]==that.dataList[j][0]){
              that.dataList[j] = that.dataList2[i]
            }
          }
        }
        /*  */
      }
      // 初始化实例
      setTimeout(() => {
      let myChart = echarts.init(document.getElementById('mychart'))
      let lunarData = [];
      let heatmapData = [];
      for (let i = 0; i < this.dataList.length; i++) {
        heatmapData.push([this.dataList[i][0], Math.random() * 300]);
        lunarData.push([this.dataList[i][0], 1, this.dataList[i][1], this.dataList[i][2]]);
      }
      let option = {
        title:{
          show:false,
          text:'',
        },
        tooltip: {
          formatter: function (params) {
            // return '降雨量: ' + params.value[1].toFixed(2);
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 300,
          calculable: true,
          seriesIndex: [2],
          orient: 'horizontal',
          // bottom: 20,
          inRange: {
            // color: ['#e0ffff', '#006edd'],
            color:'#FFFFFF',
            opacity: 0.3
          },
          controller: {
            inRange: {
              opacity: 0.5
            }
          }
        },
        calendar: [
          {
            show:false,
            left: 'center',
            top: 'top',
            cellSize: [130, 100],
            yearLabel: { show: false },
            orient: 'vertical',
            cursor:'pointer',
            splitLine:{
              show:false
            },
            dayLabel: {
              show:false,
              color:'#797979',
              fontWeight:'bold',
              firstDay: 1,
              nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            },
            monthLabel: {
              show: false
            },
            itemStyle:{
              borderColor:'#F0F0F0'
            },
            silent:false,
            range: that.dataShow
          }
        ],
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                var d = echarts.number.parseDate(params.value[0]);
                if(params.value[2].length==0){
                  return '{date| '+d.getDate()+'}' + '\n\n'+ '活动区域：无'  + '\n\n';
                }
                return '{date| '+d.getDate()+'}' + '\n\n'+ '活动区域：' + params.value[2] + '\n\n';
              },
              rich:{
                date:{
                  color:'#5793e5',
                  fontWeight:'bold',
                  fontSize:14
                }
              },
              color: '#969696'
            },
            data: lunarData
          },
          {
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              show: true,
              formatter: function (params) {
                return '\n\n\n' + '体温：'+ (params.value[3]?params.value[3]:'无');
              },
              fontSize: 14,
              fontWeight: 700,
              color: '#ff2c16'
            },
            data: lunarData
          },
         {
            name: '降雨量',
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: heatmapData,
            emphasis:{
              // disabled:false,
              itemStyle:{
                color:'#1890ff'//鼠标经过高亮
              }
            }
          }
        ]
      };
      // 渲染数据
      myChart.setOption(option, true)
      myChart.on('click', function (params) {
        that.openStatisticsForm2 = true
        that.form.statisticsDate = that.dataList[params.dataIndex][0]
        that.form.activityArea = that.dataList[params.dataIndex][1]
        that.form.temperature = that.dataList[params.dataIndex][2]

        //解决input输入就disabled问题
        that.form.activityArea2 = that.dataList[params.dataIndex][1]
        that.form.temperature2 = that.dataList[params.dataIndex][2]
      });
      }, 100);
    },

完整代码：https://download.csdn.net/download/weixin_46972395/86539186