ssi/ui/src/views/bizManager/forecastPowerShortTerm/charts/index.vue

<template>
  <div style="width: 100%;height: 100%" >
    <div id="fpcharts"></div>
  </div>
</template>

<script>
import resize from '../../../../components/Charts/mixins/resize'
import * as echarts from 'echarts';
export default {
  mixins: [resize],
  watch: {
    drawData:{
      handler(newValue, oldValue) {
        this.draw(newValue.times, newValue.datas,newValue.cap)
      },
      deep: true
    },
    resizeKey:function(newQuestion, oldQuestion){
      if(this.chart !=null){
        this.chart.resize();
      }
    }
  },
  props: {
    drawData:{
      type:Object,
    },
    resizeKey:{
      type:Number
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    draw(timeaxis,realpower,cap) {
      console.log(timeaxis.length)
      this.chart = echarts.init(document.getElementById('fpcharts'))
      var option ={
        title: {
          top: 20,
          text: '短期预测实时查询',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['实时短期预测'],
          right: '4%',
          textStyle: {
            fontSize: 12,
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,

          left:"15%",
          right:"15%",
          textStyle:{
            color:"#ffffff"
          }
        }, {
          type: 'inside'
        }],
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: timeaxis
        },
        yAxis: {
          type: 'value',
          name: '(MW)',
        },
        series: [
          {
            name: '实时短期预测',
            data: realpower,
            type: 'line',
            smooth: true,
            showSymbol: false
          }
        ]
      }
      option.yAxis[0] = cap
      this.chart.setOption(option,true)
    },

  }
}
</script>
<style scoped>
#fpcharts{
  width: 100%;
  height:calc(80vh - 50px);
}
</style>