echarts小结 - 绘制某年某月学习时长

第一次使用echarts绘图，自己做了小小总结～～

一、实现效果图

image.png

二、html

使用了element-ul DatePicker组件。

<div class="choose-month">
      <span class="demonstration">选择月份：</span>
      <el-date-picker
        v-model="chooseMonth"
        type="month"
        placeholder="选择月"
        size="small"
        @change="changeMonth">
      </el-date-picker>
</div>
<div id="main" style="width: 600px;height:400px;"></div>

三、js部分

处理日期方法，返回‘2018,1,1’格式

formatDate(day) {
    var formatDay = [day.getFullYear(), day.getMonth() + 1, 1].join(',');

    return formatDay;
},

绘图方法如下，第一个参数为选中值，第二个参数为绘图数据

echarts(chooseMonth, yData) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 格式日期
      var formatDay = this.formatDate(chooseMonth, ',');
      // 指定图表的配置项和数据
      var now = new Date(formatDay);
      var oneDay = 24 * 3600 * 1000;
      var date = [];

      // 计算x轴坐标
      function addDate() {
        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
        date.push(now);

        now = new Date(+new Date(now) + oneDay);
      }

      // 计算当前选中月份天数
      var arr = formatDay.split(',');
      var d = new Date(arr[0], arr[1], 0);
      var monthDays = d.getDate();

      // 按当月天数循环
      for (var i = 1; i < monthDays + 1; i++) {
        addDate();
      }

      var option = {
        title: {
          text: '学习时长统计',
          x: 'center',
          top: 10,
          textStyle: {
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['在线学习时长'],
          bottom: 10
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitNumber: 6,
          data: date
        },
        yAxis: {
          boundaryGap: [0, '20%'],
          type: 'value'
        },
        series: [
          {
            name: '在线学习时长',
            type: 'line',
            smooth: true,
            areaStyle: {
              normal: {}
            },
            data: yData
          }
        ],
        backgroundColor: '#f7f7f7'
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
},

日期切换是执行changeMonth函数

changeMonth(chooseMonth) {
      this.echarts(chooseMonth, this.yData);
}

现在需要处理，第一次进入页面时，获取当前时间，默认显示当前月数据。

mounted: function() {
    // 获取进入页面时间
    this.chooseMonth = new Date();
    // 绘图
    this.echarts(this.chooseMonth, this.yData);
}

然后总结到这里就结束了。。。

第一次使用简书发文章，编辑了好多次，尝试怎么贴代码会高亮，总算搞好了、、、