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'
import { Random } from 'mockjs'

class ChartOption {
  constructor() {
    this.color = ['#E02094', '#F0D63C', '#1A99FF']

    this.legend = {
      top: 11,
      right: 32,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#fff9',
        fontSize: 10
      }
    }

    this.grid = {
      top: 36,
      left: 64,
      bottom: 36
    }

    this.tooltip = {
      show: true,
      trigger: 'axis',
      // position: [200,10],
      // position: ['25%', '25%'],
      position: pointer => {
        return [pointer[1], 0]
      },
      axisPointer: {
        type: 'line',
        axis: 'x',
        lineStyle: {
          color: '#7BFFFB',
          type: 'dotted'
        }
      },
      padding: 10,
      backgroundColor: 'rgba(13, 29, 53, 0.8)',
      extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
    }

    this.xAxis = {
      type: 'category',
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      axisTick: { show: false },
      axisLabel: {
        color: '#fff9',
        fontSize: 12,
        margin: 10
      },
      axisLine: {
        lineStyle: {
          color: '#fff3'
        }
      }
    }

    this.yAxis = [
      {
        name: '电流/A    ',
        nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
        type: 'value',
        splitNumber: 4,
        onZero: true,
        position: 'left',
        offset: 28,
        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: '  电压/V  ',
        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'
          }
        }
      },
      {
        name: '        温度',
        nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 },
        axisTick: { show: false },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff9',
            width: 1
          }
        },
        type: 'value',
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#fff1',
            type: 'dotted'
          }
        },
        axisLabel: {
          color: '#fff9',
          fontSize: 10
        }
      }
    ]

    this.series = [
      {
        name: 'ABC三相电压/v',
        type: 'line',
        yAxisIndex: 0,
        // smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: Array(12)
          .fill(1)
          .map(_ => Random.integer(30, 100)),
        symbol: 'circle',
        symbolSize: 0.2,
        showSymbol: false
      },
      {
        name: 'ABC三相电流/a',
        type: 'line',
        yAxisIndex: 1,
        // smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: Array(12)
          .fill(1)
          .map(_ => Random.integer(30, 100)),
        symbol: 'circle',
        symbolSize: 0.2,
        showSymbol: false
      },
      {
        name: '电缆温度',
        type: 'line',
        yAxisIndex: 2,
        // smooth: true,
        emphasis: {
          focus: 'series'
        },
        data: Array(12)
          .fill(1)
          .map(_ => Random.integer(30, 100)),
        symbol: 'circle',
        symbolSize: 0.2,
        showSymbol: 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: 'DianLineChart',
  mixins: [resize],
  /** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
  inject: ['resizeStatus'],
  /** End Fn.1 */
  props: {
    id: {
      type: String,
      default: 'default-dian-line-chart'
    }
  },
  data() {
    return {
      chart: null,
      option: null
    }
  },
  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.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 {
  height: 100%;
  width: 100%;
}

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