shuili-vue/src/views/dike/engineeringCondition/identificationPlate/components/statisticalChart.vue

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

<script>
import * as echarts from 'echarts';
import {getStatistics} from '@/api/yg/dikeMark'
export default {
  name: 'ProjectQuantityChart',
  props: {
    // 可以通过props接收数据，方便父组件传入不同数据
    chartData: {
      type: Array,
      default: () => [
        { city: '广州市', value: 2 },
        { city: '珠海市', value: 1 }
      ]
    }
  },
  data() {
    return {
      chart: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ids: null,
        data: {
          dikeName: null,
          markName: null,
          type: null,
          markType: null,
        },
        // 排序方式
        params: {
          // 按哪个字段排序
          orderBy: "create_time",
          // desc降序，升序asc
          sortBy: "desc",
        },
      },
    };
  },
  mounted() {
    getStatistics(this.queryParams).then(res=>{
      console.log(666,res)
      this.initChart(res);

    })
    // 添加窗口大小变化监听，使图表响应式调整
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听，避免内存泄漏
    window.removeEventListener('resize', this.resizeChart);
    // 销毁图表实例
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    initChart(res) {
      // 初始化图表
      this.chart = echarts.init(this.$refs.chartContainer);
      this.updateChart(res);
    },
    updateChart(res) {
      // 提取城市名和数值
      // const cities = this.chartData.map(item => item.city);
      // const values = this.chartData.map(item => item.value);
      const entries = Object.entries(res);
      const cities = entries.map(([key, value]) => {
        return key
      });
      const values = entries.map(([key, value]) => {
        return value
      });
      // 设置图表配置项
      const option = {
        title: {
          text: '标识标牌数量统计图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: cities,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          name: '数量(个)',
          nameTextStyle: {
            color: '#333'
          },
          min: 0,
          max: Math.ceil(Math.max(...values) * 1.2), // 动态设置最大值
          interval: 1,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#333'
          },
          splitLine: {
            lineStyle: {
              color: '#eee',
              type: 'solid'
            }
          }
        },
        series: [{
          name: '数量',
          type: 'bar',
          data: values,
          itemStyle: {
            color: '#45B7AF'  // 使用相似的青绿色
          },
          barWidth: '40%',
          label: {
            show: false
          }
        }],
        color: ['#45B7AF']
      };

      // 使用配置项显示图表
      this.chart.setOption(option);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  watch: {
    // 监听数据变化，更新图表
    chartData: {
      handler() {
        this.$nextTick(() => {
          this.updateChart();
        });
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>