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

var optionLegend = {
  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 偏移。
  },
}


var axisLabel = { color: 'white', fontSize: 12, margin: 8, interval: 'auto' };
var splitLine = { show: true, interval: 2, lineStyle: { type: 'dashed', color: 'gray' } }; //网格线



function echartGetOptionBar(yAxisLeft, yAxisRight) {
  var option = {
    animation: false,
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
    legend: optionLegend,
    xAxis: { type: 'category', axisTick: { alignWithLabel: true }, axisLabel: axisLabel, data: [] },
    yAxis: [
      {
        type: 'value',
        show: true,
        name: yAxisLeft,
        nameTextStyle: { color: 'white', fontSize: 15, width: 300 },
        axisTick: { show: true },
        axisLine: { show: true },
        axisLabel: axisLabel,
        splitLine: splitLine,
        //boundaryGap: [0, '100%'],
      },
      {
        position: 'right',
        type: 'value',
        show: true,
        name: yAxisRight,
        nameTextStyle: { color: 'white', fontSize: 15, width: '160px' },
        axisTick: { show: true },
        axisLine: { show: true },
        axisLabel: axisLabel,
        splitLine: splitLine,
        //boundaryGap: [0, '100%'],
      }
    ],
    series: [
      // { name: '日发电电量', type: 'bar', data: [30, 28, 35, 18, 36, 27, 19], color: '#2a82e4' },
    ],
  }
  //if (yAxisLeft) { option.yAxis[0].name = yAxisLeft; }
  //if (yAxisRight) { option.yAxis[1].name = yAxisRight; }
  // yaxis.forEach(item => { })
  //return JSON.parse(JSON.stringify(optionBar))
  return option;
}

var optionAxisX_category = {
  type: 'category',
  axisTick: { alignWithLabel: true },
  axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
  data: [],
}

var optionAxisX_time = {
  type: 'time',
  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
    },
  },
}


function echartGetOptionCurve(yAxisLeft, yAxisRight) {
  var optionCurve = {
    animation: false,
    title: [], //
    grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
    legend: optionLegend,
    tooltip: { trigger: 'axis', axisPointer: { animation: false } },
    xAxis: {
      type: 'time',
      axisTick: { alignWithLabel: true },
      //axisLine: { lineStyle: { color: 'white' } },
      //interval: 3600, // 设置x轴时间间隔
      axisLabel: {
        color: 'white',
        fontSize: 12,
        // 格式化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
        }
      },
    },
    yAxis: [
      {
        type: 'value',
        show: true,
        name: yAxisLeft,
        nameTextStyle: { color: 'white', fontSize: 15 },
        axisTick: { show: true },
        axisLine: { show: true },
        axisLabel: axisLabel,
        splitLine: splitLine,
        //boundaryGap: [0, '100%'],
      },
      {
        position: 'right',
        type: 'value',
        show: true,
        name: yAxisRight,
        nameTextStyle: { color: 'white', fontSize: 15 },
        axisTick: { show: true },
        axisLine: { show: true },
        axisLabel: axisLabel,
        splitLine: splitLine,
        //boundaryGap: [0, '100%'],
      }
    ],
    // series: [{ name: '数据', type: 'line', hoverAnimation: false, smooth: false, symbolSize: 4, data: [] }],
  }
  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, xdata, yAxisLeft, yAxisRight) {
  var echart = echarts.init(document.getElementById(id))
  var option = echartGetOptionBar(yAxisLeft, yAxisRight)
  option.legend.data = seriesItems
  option.series = []
  option.xAxis = {
    type: 'category',
    axisTick: { alignWithLabel: true },
    axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
    data: xdata
  }
  seriesItems.forEach(item => {
    option.series.push({ name: item, type: 'bar', data: [] })
  });
  echart.setOption(option)
  return echart
}

function updateEchartBar(chart, xdata, series) {
  var option = chart.getOption()
  option.xAxis = { data: xdata }
  //var series = [];
  //ydataArray.forEach((d => { series.push({ data: d }) }))
  option.series = series
  chart.setOption(option)
}

function initEchartCurve(id, seriesItems, yAxisLeft, yAxisRight) {
  var echart = echarts.init(document.getElementById(id))
  var option = echartGetOptionCurve(yAxisLeft, yAxisRight)
  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) {
    option.series[index].data = data
    // 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)
  }
}