lg_frontend/components/charts/ElectricityWaterCharts.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: 'ElectricityWaterCharts',
  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) || []
      //获取y周值
      let attrNames = Object.keys(dataSourceByAttrObj)
      let seriesList = []
      console.log('dataSource:', dataSource)
      for (const index in dataSource) {
        let yAxisDataSource = dataSource[index].map(item => item.value)
        let series = {
          name: attrNames[index],
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.1)'
          },
          showBackground: true,
          type: 'bar',
          color: 'transparent',
          yAxisIndex: 0,
          barWidth: '30',
          data: yAxisDataSource,
        }
        let topBar =
          {
            data: yAxisDataSource,
            type: "pictorialBar",
            yAxisIndex: 0,
            color: color[index],
            symbol: 'rect',
            symbolPosition: 'end', // 在数据结尾显示
            symbolSize: [30, 10], // 「树叶大小」
            symbolOffset: ['0', '0'], //「偏移量」

          }
        seriesList.push(topBar)
        seriesList.push(series)
      }
      let option = {
        color: color,
        legend: {
          show: false,
          top: 20,
          left: '30%',
          itemWidth: 11,
          itemHeight: 11,
          icon: 'circle',
          textStyle: {
            color: 'rgba(106,196,255,0.60)',
            fontSize: 15,
            padding: [0, 0, 0, 10]
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: 30,
          bottom: 10,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 15,
              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: 15,
              color: 'rgba(106,196,255,0.60)'
            },
            nameTextStyle: {
              color: 'rgba(106,196,255,0.60)',
              fontSize: 15,
              lineHeight: 20,
            },
            // 分割线
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(176,215,255,0.40)',
                type: 'dashed'
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            splitNumber: 4,
            type: 'value', scale: true, min: 0,
            nameTextStyle: {color: '#fff', fontSize: 12},
            // y轴线
            splitLine: {show: false},
            // y轴
            axisLine: {lineStyle: {color: 'rgba(255, 255, 255, .35)'}},
            // 文字
            axisLabel: {textStyle: {fontSize: 14, color: '#fff'}},
            // 刻度
            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>