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'
import { Random } from 'mockjs'
import { debounce } from '@/utils'

class ChartOption {
  constructor() {
    const wenduData = Array(12)
      .fill(1)
      .map(_ => Random.integer(30, 100))
    const dianyaData = Array(12)
      .fill(1)
      .map(_ => Random.integer(30, 100))
    const dianliuData = Array(12)
      .fill(1)
      .map(_ => Random.integer(30, 100))

    this.color = ['#1A99FF', '#F0D63C', '#E02094']

    this.legend = {
      top: 28,
      right: 40,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#fff9',
        fontSize: 10
      }
    }

    this.grid = {
      top: 80,
      left: 88,
      right: 24,
      bottom: 32
    }

    this.tooltip = {
      show: true,
      trigger: 'axis',
      textStyle: {
        fontSize: 12
      },
      axisPointer: {
        type: 'line',
        axis: 'x'
      },
      extraCssText: 'width: calc(100px*var(--beilv)) !important;'
    }

    this.xAxis = {
      type: 'category',
      data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
      axisTick: { show: false },
      axisLabel: {
        color: '#fff9',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#fff3'
        }
      }
    }

    this.yAxis = [
      {
        name: '能耗        ',
        nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, 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, lineHeight: 14, 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'
          }
        }
      }
    ]

    this.series = [
      {
        name: '产线1',
        type: 'line',
        yAxisIndex: 0,
        // smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: dianliuData,
        symbol: 'none',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#1A99FF66' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'transparent' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      {
        name: '产线2',
        type: 'line',
        yAxisIndex: 1,
        // smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: dianyaData,
        symbol: 'none',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#F0D63C66' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'transparent' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  }

  get option() {
    return this
  }

  optionFilter(option, calcSize = () => {} /** callback */) {
    let newOption
    if (Array.isArray(option)) {
      newOption = []
      option.forEach(item => {
        newOption.push(this.optionFilter(item, calcSize))
      })
      return newOption
    } else if (typeof option === 'object') {
      newOption = {}
      for (const key in option) {
        if (key === 'colorStops') newOption[key] = option[key]
        else if (
          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
        ) {
          newOption[key] = calcSize(option[key])
        } else newOption[key] = this.optionFilter(option[key], calcSize)
      }
      return newOption
    } else {
      newOption = calcSize(option)
      return option
    }
  }
}

export default {
  name: 'RealtimeLineChart',
  mixins: [resize],
  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
  inject: ['resizeStatus'],
  /** End Fn.1 */
  props: {},
  data() {
    return {
      chart: null,
      option: null
    }
  },
  computed: {
    shouldResize() {
      return this.resizeStatus()
    }
  },
  watch: {
    shouldResize(val, oldVal) {
      console.log('fullscreen resize')
      setTimeout(() => {
        this.chart.resize()
      }, 250)
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
      this.setChartOption()
    })
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose()
    this.chart = null
  },
  methods: {
    calcSize(num) {
      const beilv = document.documentElement.style.getPropertyValue('--beilv')
      return num * beilv
    },
    setChartOption() {
      let chartOption = new ChartOption()
      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
    }
  }
}
</script>

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

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