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

<template>
  <div :id="id" ref="techy-line-chart" class="techy-chart" />
</template>

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

export default {
  name: 'DianLineChart',
  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 = ['#5470C6', '#EE6666', '#339888']

    // 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],
      // 电流走势
      [60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
      // 电压走势
      [45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
    ]
    let wendu = data[0]
    let dianliu = data[1]
    let dianya = data[2]

    return {
      chart: null,
      option: {
        color: colors,
        legend: {
          top: 4,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: '#fff9',
            fontSize: 8
          }
          // data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
        },
        grid: {
          top: 32,
          left: 64,
          bottom: 28
        },
        xAxis: [
          {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            axisTick: { show: false },
            axisLabel: {
              color: '#fff9'
            },
            axisLine: {
              lineStyle: {
                color: '#fff3'
              }
            }
          }
        ],
        yAxis: [
          {
            name: '电流/A',
            nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
            type: 'value',
            splitNumber: 4,
            onZero: true,
            position: 'left',
            offset: 42,
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5982B2',
                width: 1
              }
            },
            axisLabel: {
              color: '#fff9',
              fontSize: 10
            },
            splitLine: {
              show: false
              // lineStyle: {
              //   color: '#fff3'
              // }
            }
          },
          {
            name: '电压/V',
            nameTextStyle: { align: 'right', fontSize: 9, 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: false
              // lineStyle: {
              //   color: '#fff3'
              // }
            }
          },
          {
            name: '温度',
            nameTextStyle: { align: 'left', color: '#fff9', fontSize: 9 },
            axisTick: { show: false },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff9',
                width: 1
              }
            },
            type: 'value',
            splitNumber: 4,
            splitLine: {
              lineStyle: {
                color: '#fff3'
              }
            },
            axisLabel: {
              color: '#fff9',
              fontSize: 10
            }
          }
        ],
        series: [
          {
            name: 'ABC三相电压/v',
            type: 'line',
            yAxisIndex: 0,
            // smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: dianliu,
            symbol: 'none'
          },
          {
            name: 'ABC三相电流/a',
            type: 'line',
            yAxisIndex: 1,
            // smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: dianya,
            symbol: 'none'
          },
          {
            name: '电缆温度',
            type: 'line',
            yAxisIndex: 2,
            // smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: wendu,
            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['techy-line-chart'])
      this.chart.setOption(this.option)
    })
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose()
    this.chart = null
  },
  methods: {}
}
</script>
<style scoped>
.techy-chart {
  height: 100%;
  width: 100%;
}

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