water_xcx/pages/line/index.js

import * as echarts from '../../components/ec-canvas/echarts';
Page({
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that=this;
    that.setData({
      ec: {
        onInit: that.initChart
      }
    })
    // 模拟请求
    var times=setTimeout(function(){
      console.log("模拟请求")
      // 数据
      that.data.xdata=['00:00','01:00', '02:00', '03:00', '04:00', '05:00', '6:00', '7:00','8:00','9:00','10:00','11:00','12:00','13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00','21:00','22:00','23:00'];
      that.data.data1=[18, 36, 65, 30, 78, 340, 33,18, 36, 65, 30, 78, 340, 33,18, 36, 65, 30, 78, 340, 33,18, 36, 65];
      that.data.data2=[12, 50, 51, 35, 70, 30, 200,12, 50, 51, 35, 70, 30, 20,12, 50, 51, 35, 70, 30, 200,12, 50, 51];
      clearTimeout(times);
    },1000)
  },
  // 数据切换
  qiehuan(){
    let that=this;
    // 修改数据
    that.data.xdata=['00:00','01:00'];
    that.data.data1=[ 36, 65];
    that.data.data2=[ 200,12];
    // 绘制
    that.chart.setOption(that.getOption(),true);
  },
  // 折线图
  initChart(canvas, width, height, dpr) {
    let that=this;
    // 由于请求数据有延迟所以写一个时间函数，当数据存在的时候再执行绘制
    var times=setInterval(function(){
      var xdata=that.data.xdata;
      var data1=that.data.data1;
      var data2=that.data.data2;
      if(xdata && data1 && data2){
        clearInterval(times)
        that.chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(that.chart);
        that.chart.setOption(that.getOption(),true);
        return that.chart;
      }
    },100)


  },
  getOption(){
    let that=this;
    var xdata=that.data.xdata;
    var data1=that.data.data1;
    var data2=that.data.data2;
    return {
      title:{
        text: '停车场24小时流量动态图',
        left: 'center',
        top:'4%',
        textStyle:{
          fontSize:14,
          color:'#333333'
        }
      },
      legend: {
        data: ['已停车位', '剩余车位'],
        z: 100,
        top:'15%',
        right:'4%',
        icon:'rect',
        itemWidth:11,
        itemHeight:8,
        textStyle:{
          fontSize:12,
          color:'#8C8C8C'
        }
      },
      grid:{
        left: '5%',
        right: '5%',
        bottom: '5%',
        top:'30%',
        containLabel: true
      },
      tooltip: {
        show: true,
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: xdata,
        axisLabel : {
          show : true,
          // interval: 0,
          // rotate:45, //代表逆时针旋转45度
          textStyle:{
            color:'#8C8C8C',
            fontSize:12
          }
        },
        axisLine : {
          show : true,
          lineStyle : {
            color:'#8C8C8C'
          }
          // x轴坐标轴颜色
        },
        axisTick : {
            show : true,
            lineStyle : {
              color:'#8C8C8C'
            }
            // x轴刻度的颜色
        },
      },
      yAxis: {
        x: 'center',
        type: 'value',
        axisLabel : {
          show : true,
          textStyle : {
            color : '#999',
            fontSize:12
          }
        },
        axisLine : {
            lineStyle : {
              color : 'transparent'
            }
            // y轴坐标轴颜色
        },
        axisTick : {
            lineStyle : {
              color : 'transparent'
            }
            // y轴刻度的颜色
        },
        //设置网格线颜色
        splitLine : {
            show : true,
            lineStyle : {
              color : ['#D8D8D8'],
              width : 1,
              type : 'solid'
            }
        },
      },
      series: [{
        name: '已停车位',
        type: 'line',
        smooth: false,//设置成曲线
        symbol:'none',//取消折点圆圈
        data: data1,
        itemStyle : {
          normal:{
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                      {offset: 0, color: '#04BEFE'},
                      {offset: 1, color: '#4481EB'}
                  ]
              )
          }
        },
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0,
                  color: "#BEE2FC" // 0% 处的颜色
                }, {
                  offset: 0.7,
                  color: "#BEE2FC" // 100% 处的颜色
                 }],
                  globalCoord: false // 缺省为 false
                }
              }
        },
      }, {
        name: '剩余车位',
        type: 'line',
        smooth: false,//设置成曲线
        symbol:'none',//取消折点圆圈
        data: data2,
        itemStyle : {
          normal:{
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                      {offset: 0, color: '#F9D423'},
                      {offset: 1, color: '#F83600'}
                  ]
              )
          }
        },
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0,
                  color: "#FEE7BB" // 0% 处的颜色
                }, {
                  offset: 0.7,
                  color: "#FDC4B3" // 100% 处的颜色
                 }],
                  globalCoord: false // 缺省为 false
                }
              }
        },
      }]
    };
  }
})