zkyxcx/pages/number/number.js

// pages/number/number.js
import * as echarts from '../../ec-canvas/echarts';
const app = getApp()
var host = app.globalData.host;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:{},
    analyse:{},
    day:'',
    ec: {
      // onInit: initChart
      lazyLoad: true
    },
    page:0,
    casci:0,
    act:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var y = new Date().getFullYear(), m = (new Date().getMonth() + 1), d = new Date().getDate();
    m = m > 9 ? m : '0' + m;
    d = d > 9 ? d : '0' + d;
    this.setData({
      day: y + '-' + m + '-' + d
    })
    // options.id=2;
    wx.showNavigationBarLoading()
    wx.request({
      url: host + '/api/casci/detail',
      method: 'GET',
      data: {
        id: options.id
      },
      success: res => {
        wx.hideNavigationBarLoading()
        if (res.data.code == 0) {
          this.setData({
              info:res.data.data
          })
          this.setChart()
        }

      }
    })
    wx.request({
      url: host + '/api/casci/analyse',
      method: 'GET',
      data: {
        id: options.id
      },
      success: res => {
        wx.hideNavigationBarLoading()
        if (res.data.code == 0) {
          this.setData({
            analyse: res.data.data
          })
          
        }

      }
    })

  },
  checkpage:function(e){
    this.setData({
      act: e.target.dataset.id
    })
    if (e.target.dataset.id == 0){
      this.setChart()
    }
    if (e.target.dataset.id == 1) {
      this.setChart1()
      this.setChart2()
    }
  },
  check:function(e){
    this.setData({
      casci:e.target.dataset.id
    })
    this.setChart()
    
  },
  checknum: function (e) {
    this.setData({
      page: e.target.dataset.id
    })
    this.setChart2()

  },
  setChart:function(){
    var records = [], xdata = [], ydata = [];
    if (this.data.casci == 0) {
      records = this.data.info.days7_casci;
    } else {
      records = this.data.info.days30_casci;
    }
    if (records.length <= 0) {
      return;
    }
    for (let i = 0; i < records.length; i++) {
      xdata.push(records[i].name)
      ydata.push(records[i].value)
    }
    this.oneComponent = this.selectComponent('#mychart');
    this.init_one(xdata, ydata)
  },
  setChart1: function () {
    console.log(2333)
    var records = [], xdata = [], ydata = [];
    records = this.data.analyse.days7_casci_zhuanfa;
    if (records.length <= 0) {
      return;
    }
    for (let i = 0; i < records.length; i++) {
      xdata.push(records[i].name)
      ydata.push(records[i].value)
    }
    this.oneComponent1 = this.selectComponent('#mychart1');
    this.init_two(xdata, ydata)
  },
  setChart2: function () {
    var records = [], xdata = [], ydata = [];
    if (this.data.page == 0) {
      records = this.data.info.days7_casci_read;
    } else if (this.data.page == 0) {
      records = this.data.info.days7_casci_zan;
    }else{
      records = this.data.info.days7_casci_zhuanfa;
    }
    records = this.data.analyse.days7_casci_zhuanfa;
    if (records.length <= 0) {
      return;
    }
    for (let i = 0; i < records.length; i++) {
      xdata.push(records[i].name)
      ydata.push(records[i].value)
    }
    this.oneComponent2 = this.selectComponent('#mychart2');
    this.init_three(xdata, ydata)
  },
  init_one: function (xdata, ydata) {           //初始化第一个图表
    this.oneComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      setOption(chart, xdata, ydata)
      this.chart = chart;
      return chart;
    }); 
  },
  init_two: function (xdata, ydata) {           //初始化第一个图表
    this.oneComponent1.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      setOption(chart, xdata, ydata)
      this.chart = chart;
      return chart;
    });
  },
  init_three: function (xdata, ydata) {           //初始化第一个图表
    this.oneComponent2.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      setOption(chart, xdata, ydata)
      this.chart = chart;
      return chart;
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

function setOption(chart, xdata, ydata) {
  var option = {
    legend: {
      show: false
    },
    backgroundColor:'#F1F4F6',
    grid: {
      x: 50,
      y: 30,
      x2: 10,
      y2: 35
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: '{b0}: {c0}'
    },
    xAxis: {
      type: 'category',
      data: xdata,
      axisLabel: {
        interval: 0,
        // rotate: 40,
        color: '#999999'
      }
    },
    yAxis: {
      axisLine: {
        show: true
      },
      type: 'value',
      name: '',
      axisLabel: {
        formatter: function (value, index) {//隐藏 0
          let texts = [];
          texts.push(value)
          return texts;
        },
        show: true
      },
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      symbolSize: 8,
      lineStyle: {
        color: '#FF9F2E'
        // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        //   offset: 0,
        //   color: '#FF2D68'
        // }, {
        //   offset: 1,
        //   color: '#4C4BFF'
        // }]),
      },
      areaStyle: {
        color: {
          //线性渐变
          type: 'linear',
          x:0,
          y:0,
          x2:0,
          y2:1,
          colorStops: [{
            offset: 0, color: 'rgba(255, 159, 46, .5)', // 0% 处的颜色
          }, {
              offset: 1, color: 'rgba(255, 159, 46, .2)', // 100% 处的颜色
          }],
          global: false, // 缺省为 false
        },
      },
      itemStyle: {
        borderWidth: 5,
        borderColor: '#FFAD52',
        color: '#FFAD52'
      },
      data: ydata
    }]
  };
  chart.setOption(option)
}