<!--污染物趋势变化-->
<template>
  <div id="charts" ref="charts">

  </div>
</template>

<script>
import * as echarts from 'echarts'
import {EleResize} from '@/utils/esresize';

const lodash = require('lodash')
export default {
  name: 'PollutantTrendCharts',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    color: {
      type: Array,
      default: () => [
        '#00D5FF',
        '#FDBD00',
        '#1978E5'
      ]
    }
  },
  data() {
    return {}
  },
  watch: {
    dataSource: {
      deep: true,
      immediate: true,
      handler(value) {
        if (value.length) {
          this.$nextTick(() => {
            this.init()
          })
        }
      }
    }
  },
  mounted() {
  },

  methods: {
    init() {
      let myCharts = echarts.init(this.$refs.charts)
      let barCharts = this.$refs.charts
      // 复制代码
      let color = this.color;
      let chartData = this.dataSource;
      //将数据根据attr进行分组
      let dataSourceByAttrObj = lodash.groupBy(chartData, 'attr')
      //将不同对象的值转换成不同的数组
      let dataSource = Object.values(dataSourceByAttrObj)
      //过滤x轴名称
      let xAxisName = []
      let nameLengthMaxIndex = 0
      let nameLength = 0
      //找出name最多的数据
      for (const index in dataSource) {
        let xAxisNameList = dataSource[index].map(item => item.name) || []
        if (xAxisNameList.length > nameLength) {
          nameLength = xAxisNameList.length
          nameLengthMaxIndex = index
        }
      }
      //将挑选的name作为x轴数据
      xAxisName = dataSource[nameLengthMaxIndex].map(item => item.name) || []
      console.log('xAxisName:', xAxisName)
      //获取y周值
      let attrNames = Object.keys(dataSourceByAttrObj)
      let seriesList = []
      for (const index in dataSource) {
        let yAxisDataSource = dataSource[index].map(item => item.value)
        let series = {}
        console.log('index:',index)
        if (index == 1) {
          series = {
            name: attrNames[index],
            type: 'line',
            smooth: false,
            zlevel: 3,
            color: color[index],
            symbol: 'none', //数据交叉点样式
            data: yAxisDataSource,
            yAxisIndex: 0, // 通过这个判断左右
            lineStyle: {
              width: 6,
            }
          }
        } else if (index == 0) {
          series = {
            name: attrNames[index],
            type: 'bar',
            color: color[index],
            barWidth: '50%',
            data: yAxisDataSource,
          }
        }
        seriesList.push(series)
      }
      console.log('seriesList:', seriesList)
      let option = {
        color: color,
        legend: {
          show: false,
          top: 20,
          left: '30%',
          itemWidth: 22,
          itemHeight: 22,
          icon: 'circle',
          textStyle: {
            color: 'rgba(106,196,255,0.60)',
            fontSize: 30,
            padding: [0, 0, 0, 20]
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: 60,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 30,
              color: 'rgba(106,196,255,0.60)'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(176,215,255,0.40)',
              },
            },
            axisTick: {
              show: false
            },
            data: xAxisName,
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              fontSize: 30,
              color: 'rgba(106,196,255,0.60)'
            },
            nameTextStyle: {
              color: 'rgba(106,196,255,0.60)',
              fontSize: 30,
              lineHeight: 40,
            },
            // 分割线
            splitLine: {
              lineStyle: {
                color: 'rgba(176,215,255,0.40)',
                type: 'dashed'
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          }
        ],
        series: seriesList,
      };


      myCharts.setOption(option)
      let listener = function () {
        myCharts.resize()
      }
      EleResize.on(barCharts, listener)
    }
  }
}
</script>

<style scoped lang="less">
#charts {
  height: 100%;
  width: 100%;
}
</style>
