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

<template>
  <div 
    id="analysischartLine"
    style="width: 100%"
    :style="{ height: chartHeight + 'px' }"
  ></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(370)
    }
  },
  props: {
    chartData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  watch: {
    chartData: function () {
      this.getChart()
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.chartHeight = this.tableHeight(370)
    })
  },
  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 arr = this.chartData[0].type // [水，电，煤]
      let keys = Object.keys(this.chartData[0])
      let yData = [
        {
          name: '本期',
          type: 'bar',
          data: [],
          barWidth: 20,
          label: {
            show: true,
            position: 'top'
          }
        },
        {
          name: '上期',
          type: 'bar',
          data: [],
          barWidth: 20,
          label: {
            show: true,
            position: 'top'
          }
        }
      ]
      for (let j = 0; j < arr.length; j++) {
        for (let k = 0; k < keys.length; k++) {
          if (keys[k].indexOf(arr[j]+'_上期') > -1) {
            yData[1].data.push(this.chartData[0][keys[k]])
          }
          if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
            yData[0].data.push(this.chartData[0][keys[k]])
          }
        }
      }
      var option = {
        color:['#288AFF','#8EF0AB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            return (
              params[0].axisValue + 
              `<br>` +
              params.map((item) => {
                let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
                let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
						let value = item.value ? item.value : '-'
						let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
						return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
									<span>${str}${seriesNameStr}</span>
									<span>${valueStr}</span>
								</span>`
              }).join(``)
            )
          }
        },
        legend: {
          right: '1%',
          icon: 'rect',
          itemHeight: 8,
          itemWidth: 8
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        xAxis: {
          type: 'category',
          data: arr
        },
        series: yData
      }
      option && this.chart.setOption(option);
    }
  }
}
</script>