bonus-ui/src/views/screen/wsScreen/components/left/BottomItem.vue

<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts'
import { getStatByTypeAndAgeByCityApi } from '@/api/wsScreen/index'

export default {
  name: 'EChartsCompareBars',
  props: {
    type: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      chart: null,
      categories: [],
      seriesA: [],
      seriesB: [],
    }
  },
  mounted() {
    this.getInfo()
    window.addEventListener('resize', this.resize)
  },
  methods: {
    async getInfo() {
      try {
        const res = await getStatByTypeAndAgeByCityApi({ type: this.type })
        console.log('🚀 ~ 地市装备 ~ res:', res)
        if (!res.data || res.data.length == 0) return
        this.categories = res.data.map((item) => item.name)
        this.seriesA = res.data.map((item) => item.useCount)
        this.seriesB = res.data.map((item) => item.count)
        this.$nextTick(() => {
          this.initChart()
        })
      } catch (error) {
        console.log('err', error)
      }
    },
    buildGradient(colorFrom) {
      return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: colorFrom },
        { offset: 1, color: '#0D203C' },
      ])
    },
    toDataArray(arr, borderRadius = [6, 6, 0, 0]) {
      return arr.map((v) => ({
        value: v,
        itemStyle: {
          borderRadius,
        },
      }))
    },
    initChart() {
      if (!this.$refs.chartRef) return
      this.chart = echarts.init(this.$refs.chartRef)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
        },
        legend: {
          right: 80,
          top: 0,
          orient: 'horizontal',
          icon: 'circle',
          textStyle: {
            color: '#fff', // 图例字体颜色设置
          },
        },
        grid: {
          left: '6%',
          right: '6%',
          top: '20%',
          bottom: '8%',
        },
        xAxis: {
          type: 'category',
          data: this.categories,
          axisTick: { alignWithLabel: true },
          axisLabel: {
            color: '#fff',
          },
        },
        yAxis: {
          type: 'value',
          name: '单位：台',
          axisLabel: {
            formatter: '{value}',
          },
          axisLabel: {
            color: '#fff',
          },
        },
        series: [
          {
            name: '在用装备',
            type: 'bar',
            barMaxWidth: 14,
            barGap: '100%',
            data: this.toDataArray(this.seriesA),
            label: {
              show: true,
              position: 'top',
            },
            itemStyle: {
              color: this.buildGradient('#76fbc4'),
            },
          },
          {
            name: '装备总数',
            type: 'bar',
            barMaxWidth: 14,
            barGap: '100%',
            data: this.toDataArray(this.seriesB),
            label: {
              show: true,
              position: 'top',
            },
            itemStyle: {
              color: this.buildGradient('#5C94D9'),
            },
          },
        ],
      }
      this.chart.setOption(option)
    },
    resize() {
      if (this.chart) this.chart.resize()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 280px;
  /* color: #76fbc4; */
}
</style>