// pages/shebei/shebeidetail/shebeidetail.js
import * as echarts from '../../../ec-canvas/echarts';
const app = getApp();

function initChart1(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '半年度开工曲线',
      left: 'center'
    },


    toolbox: {

    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2018-11', '2018-12', '2019-01', '2019-02', '2019-03', '2019-04'],
      axisLabel: {
        interval: 0,
      },
      name: '日期'


    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      },
      min: 100,
      max: 500,
      splitNumber: 5,
      name: '小时(h)'

    },
    series: [{
        name: '',
        type: 'line',
        smooth: true,
        color: '#FCB237',
        data: [112, 115, 454, 135, 125, 135, 170],
        markPoint: {
          data: [{
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        },
        markLine: {
          data: [{
            type: 'average',
            name: '平均值'
          }]
        },
        // areaStyle: {
        //   // normal: {
        //   //   color: '#F8E9DD' //改变区域颜色
        //   // }
        // },
      },

    ]
  };

  chart.setOption(option);
  return chart;
}


function initChart2(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ['运行中', '待机中', '未运行'],
      textStyle: {
        fontSize: 14
      },

    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name:'小时',
      min:0,
      max:24,
      interval: 1,
     
    },
    yAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
      name:'日期',
      // itemStyle:{
      //   fontSize:0
      // },
      // splitNumber:1,
    },
    series: [{
        name: '运行中',
        type: 'bar',
        stack: '总量',
      
      barWidth: 12,
      barGap:1,
        label: {
          normal: {
            show: true,
            position: 'insideRight',
         
          }
        },
        // data: [12, 13, 14, 15, 16, 3, 4,5,9],
        data:[2,2,3,4,5,6,7,8,9],
      itemStyle: {
        normal: { color: '#FFB974' }
      },
      },
      {
        name: '待机中',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'insideRight'
          }
        },
        data: [9,8,7,6,5,4,3,2,2],
        itemStyle: {
          normal: { color: '#FF8192' }
        },
      },
      {
        name: '未运行',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'insideRight'
          }
        },
        itemStyle: {
          normal: { color: '#C5C5C5' }
        },
        data: [13,14,14,14,14,14,14,14,13]
      },
      // {
      //   name: '视频广告',
      //   type: 'bar',
      //   stack: '总量',
      //   label: {
      //     normal: {
      //       show: true,
      //       position: 'insideRight'
      //     }
      //   },
      //   data: [150, 212, 201, 154, 190, 330, 410]
      // },
      // {
      //   name: '搜索引擎',
      //   type: 'bar',
      //   stack: '总量',
      //   label: {
      //     normal: {
      //       show: true,
      //       position: 'insideRight'
      //     }
      //   },
      //   data: [820, 832, 901, 934, 1290, 1330, 1320]
      // }
    ]
  };

  chart.setOption(option);
  return chart;
}
Page({

  onShareAppMessage: function(res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '',
      success: function() {},
      fail: function() {}
    }
  },

  /**
   * 页面的初始数据
   */
  data: {
    state: 1,
    statedate: "",
    date: '',

    ec: {
      onInit: initChart1,

      // onInit: initChart1

    },
    ec1: {
      onInit: initChart2,

      // onInit: initChart1

    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.setData({
      statedate: app.monthnowDate(),
      date: app.monthnowDate()
    })
  },
  selectshebei(e) {
    this.setData({
      state: e.currentTarget.dataset.id
    })
  },

  bindstateDateChange(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      statedate: e.detail.value
    })
  },
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})