294 lines
9.6 KiB
Vue
294 lines
9.6 KiB
Vue
<template>
|
||
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 280px;"></div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
myChart: null,
|
||
resizeHandler: null // 窗口resize事件处理器
|
||
};
|
||
},
|
||
props: {
|
||
seriesData: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
xData: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
name: {
|
||
type: String,
|
||
default: () => { }
|
||
},
|
||
},
|
||
watch: {
|
||
// 监听 xData 变化，触发图表更新
|
||
xData: {
|
||
handler() {
|
||
this.$nextTick(() => this.initData());
|
||
},
|
||
deep: true // 深度监听数组内元素变化
|
||
},
|
||
// 监听 seriesData 变化，触发图表更新
|
||
seriesData: {
|
||
handler() {
|
||
this.$nextTick(() => this.initData());
|
||
},
|
||
deep: true // 深度监听数组内元素变化
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.initData();
|
||
});
|
||
// 注册窗口resize事件，使用稳定的引用以便后续移除
|
||
this.resizeHandler = () => {
|
||
if (this.myChart) {
|
||
this.myChart.resize();
|
||
}
|
||
};
|
||
window.addEventListener('resize', this.resizeHandler);
|
||
},
|
||
methods: {
|
||
initData() {
|
||
const chartDom = this.$refs.cockpitEffChip;
|
||
if (!chartDom) {
|
||
console.error('图表容器未找到！');
|
||
return;
|
||
}
|
||
// 销毁已有图表实例
|
||
if (this.myChart) {
|
||
this.myChart.dispose();
|
||
}
|
||
this.myChart = echarts.init(chartDom);
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
// 优化tooltip内容，区分各系列含义
|
||
formatter: (params) => {
|
||
let html = `${params[0].axisValue}<br/>`;
|
||
params.forEach(item => {
|
||
// 直接使用系列名，无需映射，仅保留单位判断
|
||
html += `${item.marker} ${item.seriesName}: ${item.value}${'元'}<br/>`;
|
||
});
|
||
return html;
|
||
}
|
||
},
|
||
grid: {
|
||
top: 50,
|
||
bottom: 30, // 增大底部间距，避免柱子与X轴标签重叠
|
||
right: 70,
|
||
left: 50,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: true, // 开启边界间隙，让柱子居中显示，不贴边
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: 12,
|
||
interval: 0,
|
||
padding: [5, 0, 0, 0] // 标签向下偏移，避免与柱子底部重叠
|
||
},
|
||
data: this.xData // 绑定监听的 xData
|
||
}
|
||
],
|
||
yAxis: [
|
||
// 左侧Y轴：目标/达标/未达标（数量，单位“片”）
|
||
{
|
||
type: 'value',
|
||
name: '元',
|
||
nameTextStyle: {
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: 12,
|
||
align: 'right'
|
||
},
|
||
min: 0, // 最小值设0，确保柱子从X轴底部开始，不超过X轴
|
||
max: (value) => Math.ceil(value.max * 1.1), // 最大值留10%余量，避免柱子顶满
|
||
scale: false, // 关闭缩放，强制从0开始
|
||
axisTick: { show: false },
|
||
axisLabel: {
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: 12,
|
||
formatter: '{value}'
|
||
},
|
||
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||
splitNumber: 4
|
||
},
|
||
// 右侧Y轴：完成率（百分比）
|
||
// {
|
||
// type: 'value',
|
||
// // name: '%',
|
||
// nameTextStyle: {
|
||
// color: 'rgba(0, 0, 0, 0.45)',
|
||
// fontSize: 12,
|
||
// align: 'left'
|
||
// },
|
||
// min: 0,
|
||
// max: 100, // 完成率最大100%，符合业务逻辑
|
||
// axisTick: { show: false },
|
||
// axisLabel: {
|
||
// color: 'rgba(0, 0, 0, 0.45)',
|
||
// fontSize: 12,
|
||
// formatter: '{value}%'
|
||
// },
|
||
// splitLine: { show: false }, // 不重复显示分割线
|
||
// axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||
// splitNumber: 4
|
||
// }
|
||
],
|
||
series: [
|
||
// 1. 完成率：折线图（绑定右侧百分比Y轴）
|
||
// {
|
||
// name: '产销率',
|
||
// type: 'line',
|
||
// yAxisIndex: 1, // 绑定右侧Y轴
|
||
// lineStyle: {
|
||
// color: 'rgba(40, 138, 255, .5)',
|
||
// width: 2 // 线条加粗，突出重点
|
||
// },
|
||
// itemStyle: {
|
||
// color: 'rgba(40, 138, 255, 1)',
|
||
// borderColor: 'rgba(40, 138, 255, 1)', // 数据点白色边框，增强辨识度
|
||
// borderWidth: 2,
|
||
// radius: 4 // 数据点圆角，更圆润
|
||
// },
|
||
// areaStyle: {
|
||
// opacity: 0.2, // 降低面积透明度，不抢柱状图视觉焦点
|
||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
// { offset: 0, color: 'rgba(40, 138, 255, .9)' },
|
||
// { offset: 1, color: 'rgba(255, 132, 0, 0)' }
|
||
// ])
|
||
// },
|
||
// data: [65, 78, 52, 85, 60, 95, 72], // 完成率数据（0-100）
|
||
// symbol: 'circle', // 数据点为圆形
|
||
// symbolSize: 6 // 数据点大小
|
||
// },
|
||
// 2. 目标：柱状图（绑定左侧数量Y轴）
|
||
{
|
||
name:this.name,
|
||
type: 'bar',
|
||
yAxisIndex: 0,
|
||
barWidth: 24,
|
||
label: {
|
||
show: true, // 开启显示
|
||
position: 'top', // 标签位置，可选：'top'、'middle'、'bottom'
|
||
// 也可以使用绝对像素值定位，例如 [10, '50%']
|
||
// position: [10, '50%'],
|
||
|
||
// 标签内容格式化，这里直接显示数据值
|
||
formatter: '{c}',
|
||
|
||
// 文字样式
|
||
color: 'rgba(11, 88, 255, 1)', // 文字颜色
|
||
fontSize: 14, // 文字大小
|
||
// fontWeight: 'bold', // 文字粗细
|
||
// fontFamily: 'Arial, sans-serif' // 字体
|
||
},
|
||
itemStyle: {
|
||
// 移除多余的 normal 层级，直接配置 color 渐变
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
|
||
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
|
||
]
|
||
},
|
||
borderRadius: [4, 4, 0, 0],
|
||
borderWidth: 0
|
||
},
|
||
data: this.seriesData
|
||
},
|
||
// 3. 达标：柱状图（绑定左侧数量Y轴）
|
||
// {
|
||
// name: '产量',
|
||
// type: 'bar',
|
||
// yAxisIndex: 0,
|
||
// barWidth: 24,
|
||
// // 关键修复：label 直接放在 series 下，而非 itemStyle 内
|
||
// itemStyle: {
|
||
// // 移除多余的 normal 层级，直接配置 color 渐变
|
||
// color: {
|
||
// type: 'linear',
|
||
// x: 0,
|
||
// y: 0,
|
||
// x2: 0,
|
||
// y2: 1,
|
||
// colorStops: [
|
||
// { offset: 0, color: 'rgba(174, 239, 224, 1)' },
|
||
// { offset: 1, color: 'rgba(118, 218, 190, 1)' }
|
||
// ]
|
||
// },
|
||
// borderRadius: [4, 4, 0, 0],
|
||
// borderWidth: 0
|
||
// },
|
||
// data: [130, 220, 95, 255, 132, 332] // 达标数据（小于目标）
|
||
// },
|
||
// 4. 未达标：柱状图（绑定左侧数量Y轴）
|
||
// {
|
||
// name: '未达标',
|
||
// type: 'bar',
|
||
// yAxisIndex: 0,
|
||
// barWidth: 18,
|
||
// itemStyle: {
|
||
// color: 'rgba(249, 164, 74, 1)',
|
||
// borderRadius: [4, 4, 0, 0],
|
||
// borderWidth: 0
|
||
// },
|
||
// data: [70, 60, 85, 45, 88, 18, 78] // 未达标数据（目标-达标）
|
||
// }
|
||
],
|
||
// 图例：区分各系列，点击可控制显示隐藏
|
||
// legend: {
|
||
// top: 0,
|
||
// left: 'center',
|
||
// itemWidth: 12,
|
||
// itemHeight: 8,
|
||
// textStyle: {
|
||
// color: 'rgba(0, 0, 0, 0.45)',
|
||
// fontSize: 12
|
||
// },
|
||
// data: ['完成率', '目标', '达标', '未达标']
|
||
// }
|
||
};
|
||
|
||
option && this.myChart.setOption(option);
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
// 移除窗口resize事件监听器
|
||
if (this.resizeHandler) {
|
||
window.removeEventListener('resize', this.resizeHandler);
|
||
this.resizeHandler = null;
|
||
}
|
||
// 销毁图表，避免内存泄漏
|
||
if (this.myChart) {
|
||
this.myChart.dispose();
|
||
this.myChart = null;
|
||
}
|
||
}
|
||
};
|
||
</script>
|