ionic开发的过程中遇到的问题及解决方法的整理(十一)————echarts进阶——可缩放滑动图表

关于echarts的基本用法我们都会了，高级一点的日历也没问题了。下面来挑战一下滑动的图表吧。
首先呢老样子先把echart引入到ionic项目中（不清楚的小伙伴挪步这里）
然后再需要的ts中引入echarts

import echarts from 'echarts';

然后获取html中的id,以时间线为X轴创建一个图表

getEchart(){
//月份是从0-11这个常识就不用说了
	  let year = 2001; let mount = 0; let date = 1;//获取开始年月日
      let timed = +new Date(year, mount, date);//将开始年月日转换成时间戳
      let oneDay = 24 * 3600 * 1000;
      let timing = +new Date();//获取结束时间戳
      let dates = (timing - timed)/86400000//开始结束相差的天数
      let xdate = [];
      var num = [Math.random() * 300];
      for (let i = 0; i <= dates; i++){//根据天数循环添加
        let now = new Date(timed += oneDay)
        xdate.push([now.getFullYear(), now.getMonth() + 1, now.getDate() - 1].join('/'));//获取X时间数据
        num.push(Math.round((Math.random() - 0.5) * 20 + num[i]));//模拟数据
      }
	//注意！如果在这有小伙伴报错的话可以把接下来的代码挪到一个回调函数里，别问我为什么我也不知道
    let myChart = echarts.init(<HTMLDivElement>document.getElementById('echarts'));
      let option = {
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%'];
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xdate,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [{
          type: 'inside',
          start: 90,
          end: 100,
        }],
        series: [
          {
            name: '模拟数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            data: num
          }
        ]
      };
      myChart.setOption(option);
}

emmmmmm到这就算差不多结束了。有不足的地方欢迎补充！