11-mes-new/src/views/3DOverview/components/RightContentRealtimeProduction.vue

<template>
  <!-- <techy-bar :extra-space-between-zero="16" :datainfo="[
        {
          name: '产量',
          list: [64, 91, 55, 65, 37, 77]
        },
        {
          name: '能耗',
          list: [32, 65, 65, 54, 37, 77]
        }
      ]" /> -->
  <div class="techy-chart" ref="realtimeLineChart"></div>
</template>

<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'

export default {
  name: 'RealtimeLineChart',
  mixins: [resize],
  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
  inject: ['resizeStatus'],
  /** End Fn.1 */
  props: {
    id: {
      type: String,
      default: 'default-dian-id'
    },
    title: {
      type: String,
      default: 'default-title'
    },
    xData: {
      type: Array,
      default: () => []
    },
    seriesData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const colors = ['#1A99FF', '#F0D63C', '#E02094']

    // const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
    let data = [
      // 温度走势
      [90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
        let v = Math.floor(Math.random() * 100)
        while (v < 30) {
          v = Math.floor(Math.random() * 100)
        }
        return v
      }),
      // 电流走势
      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
        let v = Math.floor(Math.random() * 100)
        while (v < 30) {
          v = Math.floor(Math.random() * 100)
        }
        return v
      }),
      // 电压走势
      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
        let v = Math.floor(Math.random() * 100)
        while (v < 30) {
          v = Math.floor(Math.random() * 100)
        }
        return v
      })
    ]
    let wendu = data[0]
    let dianliu = data[1]
    let dianya = data[2]

    return {
      chart: null,
      option: {
        color: colors,
        legend: {
          top: 28,
          right: 40,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#fff9',
            fontSize: 10
          }
          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
        },
        grid: {
          top: 80,
          left: 88,
          right: 24,
          bottom: 32
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            axis: 'x'
          },
          extraCssText: 'width: 100px !important;'
        },
        xAxis: [
          {
            type: 'category',
            data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
            axisTick: { show: false },
            axisLabel: {
              color: '#fff9'
            },
            axisLine: {
              lineStyle: {
                color: '#fff3'
              }
            }
          }
        ],
        yAxis: [
          {
            name: '能耗        ',
            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
            type: 'value',
            splitNumber: 4,
            onZero: true,
            position: 'left',
            offset: 40,
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5982B2',
                width: 1
              }
            },
            axisLabel: {
              color: '#fff9',
              fontSize: 10
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff1',
                type: 'dotted'
              }
            }
          },
          {
            name: '产量        ',
            nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
            type: 'value',
            splitNumber: 4,
            axisTick: { show: false },
            onZero: true,
            position: 'left',
            offset: 0,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5982B2',
                width: 1
              }
            },
            axisLabel: {
              color: '#fff9',
              fontSize: 10
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff1',
                type: 'dotted'
              }
            }
          }
        ],
        series: [
          {
            name: '产线1',
            type: 'line',
            yAxisIndex: 0,
            // smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: dianliu,
            symbol: 'none'
          },
          {
            name: '产线2',
            type: 'line',
            yAxisIndex: 1,
            // smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: dianya,
            symbol: 'none'
          }
        ]
      }
    }
  },
  computed: {
    shouldResize() {
      return this.resizeStatus()
    }
  },
  watch: {
    shouldResize(val, oldVal) {
      setTimeout(() => {
        this.chart.resize()
      }, 250)
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
      this.chart.setOption(this.option)
    })
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose()
    this.chart = null
  },
  methods: {}
}
</script>

<style scoped>
.techy-chart {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.techy-chart >>> div {
  width: 100% !important;
}
</style>