klp-oa/klp-ui/src/views/wms/receive/report/charts/bar.vue

<template>
  <!-- 柱状图容器 必须设置宽高，绑定ref获取DOM节点 -->
  <div class="bar-chart-container" ref="chartRef"></div>
</template>

<script>
// Vue2 标准echarts引入方式，兼容性最优
import * as echarts from 'echarts'

export default {
  name: 'BarChart',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartInstance: null // 存储echarts实例，防止重复渲染/内存泄漏
    }
  },
  mounted() {
    // 初始化图表
    this.initEcharts()
    // 监听窗口大小变化，图表自适应
    window.addEventListener('resize', this.resizeChart)
  },
  beforeDestroy() {
    // Vue2 销毁生命周期钩子，清理实例+解绑监听
    window.removeEventListener('resize', this.resizeChart)
    if (this.chartInstance) {
      this.chartInstance.dispose()
      this.chartInstance = null
    }
  },
  watch: {
    // ✅ 深度监听父组件传的data数据，数据更新/新增/删除 自动重绘图表
    data: {
      deep: true,
      immediate: true,
      handler() {
        this.chartInstance && this.initEcharts()
      }
    }
  },
  methods: {
    // 初始化柱状图核心方法
    initEcharts() {
      const chartDom = this.$refs.chartRef
      // 防止重复初始化，先销毁旧实例
      if (this.chartInstance) {
        this.chartInstance.dispose()
      }
      // 创建新的echarts实例
      this.chartInstance = echarts.init(chartDom)

      // 从props.data中提取图表数据，和你的数据格式完全匹配
      const xAxisData = this.data.map(item => item.productName) // X轴：收货计划名称
      const coilCountData = this.data.map(item => item.coilCount) // 总卷数
      const totalWeightData = this.data.map(item => Number(item.totalWeight)) // 总重量(字符串转数字)

      // 柱状图核心配置项
      const option = {
        // 图表内边距，防止内容溢出
        grid: { left: '3%', right: '10%', bottom: '3%', containLabel: true },
        // 鼠标悬浮提示框，精准展示数据
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }, // 鼠标悬浮显示阴影指示器，柱状图专属
          formatter: '{b}<br/>{a}：{c}'
        },
        // 图例，右上角展示指标名称，可点击切换显隐
        legend: {
          data: ['总卷数', '总重量(吨)'],
          top: 10
        },
        // X轴 类目轴 - 收货计划名称/日期
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisLabel: { interval: 0 }, // 强制显示所有X轴标签，不隐藏
            axisTick: { show: false } // 隐藏X轴刻度线，美化
          }
        ],
        // ✅ 双Y轴配置（核心），解决数值量级差异大的问题
        yAxis: [
          {
            // 左侧Y轴 - 对应总卷数
            type: 'value',
            name: '总卷数',
            nameTextStyle: { color: '#1890ff' },
            axisLine: { lineStyle: { color: '#1890ff' } }
          },
          {
            // 右侧Y轴 - 对应总重量
            type: 'value',
            name: '总重量(吨)',
            nameTextStyle: { color: '#ff7a45' },
            axisLine: { lineStyle: { color: '#ff7a45' } },
            splitLine: { show: false } // 关闭右侧网格线，避免页面杂乱
          }
        ],
        // ✅ 双系列柱状图配置
        series: [
          {
            name: '总卷数',
            type: 'bar', // 图表类型：柱状图
            yAxisIndex: 0, // 绑定左侧Y轴
            barWidth: '35%', // 柱子宽度，美观适配
            itemStyle: { color: '#1890ff', borderRadius: [4, 4, 0, 0] }, // 柱子颜色+顶部圆角
            data: coilCountData
          },
          {
            name: '总重量(吨)',
            type: 'bar', // 图表类型：柱状图
            yAxisIndex: 1, // 绑定右侧Y轴
            barWidth: '35%',
            itemStyle: { color: '#ff7a45', borderRadius: [4, 4, 0, 0] },
            data: totalWeightData
          }
        ]
      }
      // 挂载配置项渲染图表
      this.chartInstance.setOption(option)
    },
    // 图表自适应窗口大小
    resizeChart() {
      this.chartInstance && this.chartInstance.resize()
    }
  }
}
</script>

<style scoped>
/* 柱状图容器样式，宽高可按需修改，必须设置！ */
.bar-chart-container {
  width: 100%;
  height: 400px;
}
</style>