yudao-dev/src/views/energy/analysis/yoyAnalysis/components/lineChart.vue

<template>
  <div id="analysischartLine" style="width: 100%;height: 100%;"></div>
</template>
<script>
import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize'
export default {
  name: "LineChart",
  mixins: [resize],
  data() {
    return {
      chartDom: '',
      chart: '',
      chartHeight: this.tableHeight(214) - 70
    }
  },
  props: {
    chartData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  watch: {
    chartData: function () {
      this.getChart()
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.chartHeight = this.tableHeight(214) - 70
    })
  },
  methods: {
    getChart() {
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
      this.chartDom = document.getElementById('analysischartLine')
      this.chart = echarts.init(this.chartDom)
      if (this.chartData.length === 0) {
        return false
      }
      let xData = []
      let arr = this.chartData[0].type
      let keys = Object.keys(this.chartData[0])
      let yData = []
      for (let j = 0; j < arr.length; j++) {
        for (let k = 0; k < keys.length; k++) {
          if (keys[k].indexOf(arr[j] + '_上年同期') > -1 || keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
            let obj = {
              name: '',
              type: 'line',
              data: []
            }
            obj.name = keys[k]
            yData.push(obj)
          }
        }
      }
      for (let i = 0; i < this.chartData.length; i++) {
        xData.push(this.chartData[i].time)
        for (let p = 0; p < yData.length; p++) {
          yData[p].data.push(this.chartData[i][yData[p].name])
        }
      }
      var option = {
        color: ['#FFDC94', '#8EF0AB', '#63BDFF', '#288AFF', '#7164FF', '#FF6860', '#FF9747', '#B0EB42', '#D680FF', '#0043D2'],
        legend: {
          data: keys,
          right: '1%'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: yData
      };

      option && this.chart.setOption(option);
    }
  }
}
</script>