energy_storage/bin/Release/assets/html/js/myecharts.js

var optionBar = {
  animation: false,
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
  legend: {
    show: true, //是否显示
    orient: 'horizontal',
    x: 'center', //可设定图例在左、右、居中
    y: 'top', //可设定图例在上、下、居中
    padding: [20, 10, 10, 50], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
    // data: ['日发电电量', '日入网电量'],
    textStyle: {
      //图例的公用文本样式。
      color: '#ffffff', // 文字的颜色。
      // fontStyle: "normal", // 文字字体的风格。'italic'
      // fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
      // fontFamily: "sans-serif", // 文字的字体系列。
      // fontSize: 12, // 文字的字体大小。
      // lineHeight: 20, // 行高。
      // backgroundColor: "transparent", // 文字块背景色。
      // borderColor: "transparent", // 文字块边框颜色。
      // borderWidth: 0, // 文字块边框宽度。
      // borderRadius: 0, // 文字块的圆角。
      // padding: 0, // 文字块的内边距
      // shadowColor: "transparent", // 文字块的背景阴影颜色
      // shadowBlur: 0, // 文字块的背景阴影长度。
      // shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
      // shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
      // width: 50, // 文字块的宽度。 默认
      // height: 40, // 文字块的高度 默认
      // textBorderColor: "transparent", // 文字本身的描边颜色。
      // textBorderWidth: 0, // 文字本身的描边宽度。
      // textShadowColor: "transparent", // 文字本身的阴影颜色。
      // textShadowBlur: 0, // 文字本身的阴影长度。
      // textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
      // textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
    },
  },

  xAxis: {
    type: 'category',
    //data: ['2025/3/1', '2025/3/2', '2025/3/3', '2025/3/4', '2025/3/5', '2025/3/6', '2025/3/7'],
    data: ['1', '2', '3', '4', '5', '6', '7'],
    axisTick: { alignWithLabel: true },
    axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
  },

  yAxis: [
    {
      type: 'value',
      axisTick: { show: true },
      axisLine: { show: true },
      axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
      //网格线
      splitLine: { show: true, lineStyle: { type: 'dashed' } },
    },
  ],
  series: [
    // { name: '日发电电量', type: 'bar', data: [30, 28, 35, 18, 36, 27, 19], color: '#2a82e4' },
  ],
}

function echartGetOptionBar() {
  return JSON.parse(JSON.stringify(optionBar))
}

var optionAxisX_category = {
  type: 'category',
  //data: ['2025/3/1', '2025/3/2', '2025/3/3', '2025/3/4', '2025/3/5', '2025/3/6', '2025/3/7'],
  data: ['1'],
  axisTick: { alignWithLabel: true },
  axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
}

var optionAxisX_time = {
  type: 'time',
  splitLine: { show: false },
  splitNumber: 8,
  axisTick: { alignWithLabel: true },
  axisLine: { lineStyle: { color: 'white' } },
  axisLabel: {
    color: 'white',
    formatter: function (value, index) {
      var date = new Date(value)
      var hour = date.getHours()
      var minutes = date.getMinutes()
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      return hour + ':' + minutes
    },
  },
}

var optionCurve = {
  animation: false,
  title: [], //
  grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
  legend: { show: true, orient: 'horizontal', x: 'center', y: 'top', padding: [20, 10, 10, 50], textStyle: { color: '#ffffff' }, data: [], },
  tooltip: {
    trigger: 'axis',
    // formatter: function (params) {
    //   params = params[0]
    //   var date = new Date(params.name)
    //   var hour = date.getHours()
    //   var minutes = date.getMinutes()
    //   if (hour < 10) { hour = '0' + hour }
    //   if (minutes < 10) { minutes = '0' + minutes }
    //   var dateStr = hour + ':' + minutes
    //   return dateStr + ' ' + params.value[1]
    // },
    axisPointer: { animation: false },
  },
  xAxis: {
    type: 'time',
    splitLine: { show: false },
    splitNumber: 8,
    axisTick: { alignWithLabel: true },
    axisLine: { lineStyle: { color: 'white' } },
    //interval: 3600, // 设置x轴时间间隔
    axisLabel: {
      color: 'white',
      // formatter: function (value, index) {
      //   var date = new Date(value)
      //   var hour = date.getHours()
      //   var minutes = date.getMinutes()
      //   if (hour < 10) { hour = '0' + hour }
      //   if (minutes < 10) { minutes = '0' + minutes }
      //   //return hour + ':' + minutes
      //   return "value"
      // },
      // 格式化x轴显示
      formatter: function (value, index) {
        var date = new Date(value)
        var hour = date.getHours()
        var minutes = date.getMinutes()
        if (hour < 10) { hour = '0' + hour }
        if (minutes < 10) { minutes = '0' + minutes }
        return hour + ':' + minutes
        // alert(new Date().toLocaleDateString())
        // // 如果时间是 23:59:59 , 格式化为 24:00
        // if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {
        //   return moment(value).format("24:00");
        // } else {
        //   // 其他的时间返回格式化 00:00
        //   return moment(value).format("HH:mm");
        // }
      }
    },
  },
  yAxis: {
    type: 'value',
    axisTick: { show: true },
    axisLine: { show: true, lineStyle: { color: 'white' } },
    axisLabel: { color: 'white' },
    splitLine: { show: true, lineStyle: { type: 'dashed' } },
    nameTextStyle: { color: 'white', fontSize: 15 },
    boundaryGap: [0, '100%'],
  },
  // series: [{ name: '数据', type: 'line', hoverAnimation: false, smooth: false, symbolSize: 4, data: [] }],
}

function echartGetOptionCurve() {
  optionCurve.legend.data = []
  optionCurve.series = []
  return optionCurve
}

function echartUpdateData(chart, index, data) {
  var option = chart.getOption()
  if (index < option.series.length) {
    option.series[index].data = data
    chart.setOption(option)
  }
}

function initEchartBar(id, seriesItems) {
  var echart = echarts.init(document.getElementById(id))
  var option = echartGetOptionBar()
  option.legend.data = seriesItems
  option.series = []
  seriesItems.forEach(item => {
    option.series.push({ name: item, type: 'bar', data: [] })
  });
  echart.setOption(option)
  return echart
}

function updateEchartBar(chart, index, xdata, ydata) {
  var option = chart.getOption()
  option.xAxis.data = xdata
  if (index < option.series.length) {
    option.series[index].data = ydata
    chart.setOption(option)
  }
}

function initEchartCurve(id, seriesItems) {
  var echart = echarts.init(document.getElementById(id))
  var option = echartGetOptionCurve()
  option.legend.data = seriesItems
  option.series = []
  seriesItems.forEach(item => {
    option.series.push({ name: item, type: 'line', smooth: false, symbolSize: 0, data: [] })
  })
  echart.setOption(option)
  return echart
}

function updateEchartCurve(chart, index, data) {
  var option = chart.getOption()
  if (index < option.series.length) {
    for (var i = 0; i < data.length; ++i) {
      option.series[index].data[i] = { name: data[i].x, value: [data[i].x, data[i].y] }
    }
    chart.setOption(option)
  }
}