lg_frontend/components/charts/ChangesPollutantsCharts.vue

<!--空气质量变化趋势-->
<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: 'ChangesPollutantsCharts',
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    color: {
      type: Array,
      default: () => [
        '#FDBD00',
        '#00D5FF',
        '#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 areaStartColor = ['rgba(20,153,255,0.1)', 'rgba(20,224,214,0.1)', 'rgba(224,214,101,0.1)']
      let areaEndColor = ['rgba(20,153,255,1)', 'rgba(20,224,214,1)', 'rgba(224,214,101,1)']
      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) || []
      //获取y周值
      let attrNames = Object.keys(dataSourceByAttrObj)
      let seriesList = []
      for (const index in dataSource) {
        let yAxisDataSource = dataSource[index].map(item => item.value)
        let series = {
          name: attrNames[index],
          type: 'pictorialBar',
          barGap: '-20%',
          symbol: 'path://M18,3 L46,3 78,68 18,68 46,3 z',

          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: areaEndColor[index],
                },
                {
                  offset: 1,
                  color: areaStartColor[index],
                },
              ],
              global: false, //  缺省为  false
            },
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
            },
          },
          data: yAxisDataSource,
        }
        seriesList.push(series)
      }
      let option = {
        color: color,
        legend: {
          top: 20,
          left: '30%',
          itemWidth: 11,
          itemHeight: 11,
          icon: 'circle',
          textStyle: {
            color: 'rgba(106,196,255,0.60)',
            fontSize: 12,
            padding: [0, 0, 0, 10]
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: 50,
          bottom: 10,
          left: 10,
          right: 10,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 12,
              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: 12,
              color: 'rgba(106,196,255,0.60)'
            },
            nameTextStyle: {
              color: 'rgba(106,196,255,0.60)',
              fontSize: 12,
              lineHeight: 20,
            },
            // 分割线
            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>