142 lines
4.4 KiB
Vue
142 lines
4.4 KiB
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> |