autoflow_wx/pages/Information/index.js

// pages/Information/index.js
import * as echarts from '../../ec-canvas/echarts';
const api = require('../../api/index.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    daydata:[],
    tabsindex:1,
    ech: {
      lazyLoad: true
    },
    ymdlist:[],
    chargeTotal:[],
    powerdata:[],
    powerindex:0,
    datestart:'',
    formatio:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.ecline = this.selectComponent('#mychart_line2');
   // 获取当前日期对象
const now = new Date();

// 获取当前年份（4位数字）
const year = now.getFullYear();

// 获取当前月份（注意：月份从 0 开始，所以需要 +1）
const month = now.getMonth() + 1;

// 如需补全两位数字（如 3 月显示为 "03"）
const monthStr = month.toString().padStart(2, '0');
this.setData({
  datestart:`${year}-${monthStr}`
})
    this.getpowerdata()
  },
 // 选项卡
 onTabsChange(e){
  console.log(e.detail.value);
  this.setData({
    tabsindex:e.detail.value
  })
  if (e.detail.value==1) {
    this.setData({
      ymdlist:this.data.formatio.map(item => item.day),
      chargeTotal:this.data.formatio.map(item => item.averagespeed)
    })
this.initChart_right()

  }else if(e.detail.value==2){
    this.setData({
      ymdlist:this.data.formatio.map(item => item.day),
      chargeTotal:this.data.formatio.map(item => item.dailydischarge)
    })
    this.initChart_right()

  }else if(e.detail.value==3){
    this.setData({
      ymdlist:this.data.formatio.map(item => item.day),
      chargeTotal:this.data.formatio.map(item => item.dailypowerlimit)
    })
    this.initChart_right()

  }else if(e.detail.value==4){
    this.setData({
      ymdlist:this.data.formatio.map(item => item.day),
      chargeTotal:this.data.formatio.map(item => item.dayfaultlosselectricity)
    })
    this.initChart_right()

  }

  },
  initChart_right: function () {
    var unitName = ''; 
    if (this.data.tabsindex==1) {
      unitName = '风速 m/s'
      
    }else if(this.data.tabsindex==2){
      unitName = '日发电量 万/kWh'

    }else if(this.data.tabsindex==3){
      unitName = '限电指令负荷不超过 MW'

    }else if(this.data.tabsindex==4){
      unitName = '当日故障损失电量 万/kWh'

    }
    let _this = this;
    this.ecline.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr
        });
        canvas.setChart(chart);
        var option = {
          title: {
            subtext: unitName,
            textStyle: {
              color: 'rgba(0, 0, 0, 0)',
          }
          },
            grid: {
                left: '1%',
                top: '14%',
                right: '1%',
                bottom: '10%',
                containLabel: true
            },
         
            xAxis: {
                type: 'category',
                data: _this.data.ymdlist,
                axisTick: {
                    show: false
                },
                barWidth: 20,
                axisLabel: {
                  interval: 0 // 设置为0以显示所有坐标点  

              },
            
                
            },
            yAxis: {
                // name: unitName,                   
                x: 'center',                  
                type: 'value',
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            dataZoom: {
                type: 'inside',
                start: 0,
                end: 50
              },
              // dataZoom: { 
              //   type: 'slider',
              //   start: 0,
              //   end: 50,
              //   handleSize:0,
              //   show:false

              // },
            series: [{
                type:"bar",
                barMaxWidth: 20,
                smooth: true,
                label: {
                  show: true,
                  position: 'top',
                  color:'#222'
                },
                showSymbol: false, 
                data: _this.data.chargeTotal,
                itemStyle: {
                    color: 'rgba(60, 158, 250, 1)',
                     barBorderRadius: [4, 4, 0, 0] // 设置柱状图的圆角半径为5
                },
                areaStyle: {
                    color: 'rgba(60, 158, 250, 1)',
                }
            }
            // ,{
            //     name: viewname[1],
            //     type: _this.data.echartstype,
            //     smooth: true,
            //     showSymbol: false, 
            //     barMaxWidth: 20,
            //     data: _this.data.dischargeTotal,
            //     itemStyle: {
            //         color: 'rgba(77, 240, 150, 1)',
            //          barBorderRadius: [5, 5, 0, 0]
            //     },
            //     areaStyle: {
            //         color: 'rgba(77, 240, 150, 1)',
            //     }
            // }
          ]
        };

        chart.setOption(option);
        return chart;
    })
},
bindpowerChange(e){
  console.log('picker发送选择改变，携带值为', e.detail.value)
  this.setData({
    powerindex: e.detail.value
  })

},
// 电站
getpowerdata(){

api.request(`/syspowerstation/selectpowestation`, 'POST')
.then((res) => {
  console.log(res);
  this.setData({
    powerdata:res.data
  })
this.getpowerformatio()
})
.catch((err) => {
  console.error('请求失败：', err);
  // 在这里处理请求失败的情况
});
},
// 基本信息
getpowerformatio(){
  let data ={
    powerstationId:this.data.powerdata[this.data.powerindex].powerstationId,
    month:this.data.datestart
  }
  api.request(`/syspowerstation/selectpowerstationinformation`, 'POST',data)
  .then((res) => {
  // 遍历数组，修改每个元素的 day 属性（截取最后两位）
res.data = res.data.map(item => ({
  ...item, // 保留其他属性
  day: item.day.slice(-2) // 截取 day 的最后两位
}));
    // this.setData({
    //   res.data: res.data.map(item => item.day.slice(-2))
    // })
    this.setData({
      formatio:res.data
    })
       
    this.setData({
      ymdlist:res.data.map(item => item.day.slice(-2)),
      chargeTotal:res.data.map(item => item.averagespeed)
    })
this.initChart_right()

  })
  .catch((err) => {
    console.error('请求失败：', err);
    // 在这里处理请求失败的情况
  });
  },
// 选择时间
bindstartChange: function(e) {
  console.log('picker发送选择改变，携带值为', e.detail.value)
  this.setData({
    datestart: e.detail.value
  })
},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})