import * as echarts from '../../ec-canvas/echarts.min';

const app = getApp();

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '身高（cm）',
      left: 'left',
      fontSize: 6
    },
    legend: {
      data: ['实际身高', '标准范围'],
      bottom: 0,
      left: 'center',
      z: 100
    },
    grid: {
      containLabel: true,
      top: '12%',
      left: '5%',
      right: '5%',
      bottom: '10%'
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一个月', '两个月', '三个月', '四个月', '五个月', '六个月'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '实际身高',
      type: 'line',
      smooth: true,
      data: [131, 135, 140, 145, 150, 155]
    }, {
      name: '标准范围',
      type: 'line',
      smooth: true,
      data: [120, 130, 140, 150, 160, 170]
    }]
  };

  chart.setOption(option);
  return chart;
}

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

  var option = {
    title: {
      text: '体重（kg）',
      left: 'left', 
      fontSize: 12
    },
    legend: {
      data: ['实际体重', '标准范围'],
      bottom: 0,
      left: 'center',
      z: 100
    },
    grid: {
      containLabel: true,
      top: '12%',
      left: '5%',
      right: '5%',
      bottom: '10%'
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一个月', '两个月', '三个月', '四个月', '五个月', '六个月'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '实际体重',
      type: 'line',
      smooth: true,
      data: [131, 135, 140, 145, 150, 155]
    }, {
      name: '标准范围',
      type: 'line',
      smooth: true,
      data: [120, 130, 140, 150, 160, 170]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    },
    ec2: {
      onInit: initChart2
    },
    activeIndex: 0
  },
  changeChart(e) {
    const index = e.currentTarget.dataset.index;
    console.log(index);
    this.setData({
      activeIndex: index
    })
  },

  onReady() {
  },

  toClockIn(){
    wx.navigateTo({
      url: '/pages/clockIn/index',
    })
  },
  toEmergency(){
    wx.navigateTo({
      url: '/pages/emergency/index',
    })
  }
});