|
@@ -221,6 +221,10 @@ const chartOption = computed(() => {
|
|
|
top: '15%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
+ // 添加全局的鼠标交互配置
|
|
|
+ animation: true,
|
|
|
+ animationDuration: 300,
|
|
|
+ animationEasing: 'cubicOut',
|
|
|
...props.options
|
|
|
}
|
|
|
|
|
@@ -292,12 +296,19 @@ const generateLineChart = (baseOption) => {
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
symbol: 'circle',
|
|
|
- symbolSize: 6,
|
|
|
+ symbolSize: 8, // 增大数据点基础大小
|
|
|
lineStyle: {
|
|
|
width: 3
|
|
|
},
|
|
|
areaStyle: {
|
|
|
opacity: 0.1
|
|
|
+ },
|
|
|
+ // 鼠标悬停时的效果
|
|
|
+ emphasis: {
|
|
|
+ symbolSize: 14, // 悬停时数据点放大
|
|
|
+ lineStyle: {
|
|
|
+ width: 4 // 悬停时线条也稍微加粗
|
|
|
+ }
|
|
|
}
|
|
|
}))
|
|
|
}
|
|
@@ -353,6 +364,14 @@ const generateBarChart = (baseOption) => {
|
|
|
barWidth: '60%',
|
|
|
itemStyle: {
|
|
|
borderRadius: [4, 4, 0, 0]
|
|
|
+ },
|
|
|
+ // 鼠标悬停时的效果
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: [4, 4, 0, 0],
|
|
|
+ shadowBlur: 6, // 悬停时添加阴影效果
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.3)'
|
|
|
+ }
|
|
|
}
|
|
|
}))
|
|
|
}
|
|
@@ -660,6 +679,18 @@ defineExpose({
|
|
|
@import '../styles/report-common.scss';
|
|
|
|
|
|
.chart-container {
|
|
|
+
|
|
|
+ /* 添加鼠标交互样式 */
|
|
|
+ .echarts {
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.002);
|
|
|
+ /* 轻微放大效果 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
&.fullscreen {
|
|
|
position: fixed;
|
|
|
top: 0;
|