style【能源场景】:微调样式

This commit is contained in:
Free-sss 2025-09-03 22:27:23 +08:00
parent 6e7ace57bb
commit c065bc4cfd

View File

@ -95,24 +95,23 @@ const option = {
// 数据系列配置
series: [{
name: '能源消耗',
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#82ffff' }, // 更暗的左侧颜色,增强阴影效果
{ offset: 0.2, color: '#00bfbf' }, // 左侧过渡色
{ offset: 0.5, color: '#008f8f' }, // 中间主色
{ offset: 0.8, color: '#00bfbf' }, // 右侧过渡色
{ offset: 1, color: '#82ffff' } // 右侧亮色,增强高光效果
{ offset: 0, color: 'rgba(2, 206, 214, 0.8)' }, // 更暗的左侧颜色,增强阴影效果
// { offset: 0.2, color: '#00bfbf' }, // 左侧过渡色
{ offset: 0.5, color: 'rgba(44, 162, 163, 0.5)' }, // 中间主色
// { offset: 0.8, color: '#00bfbf' }, // 右侧过渡色
{ offset: 1, color: 'rgba(25, 217, 170, 0.8)' } // 右侧亮色,增强高光效果
]),
opacity: 0.60,
opacity: 0.80,
// 添加更强的3D效果
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.7)',
shadowOffsetX: -5,
shadowOffsetY: 5,
borderRadius: [0, 0, 4, 4],
borderRadius: [0, 0, 5, 5],
borderWidth: 0,
},
@ -131,19 +130,21 @@ const option = {
// 3D圆柱体效果
roundCap: false
}, {
name: '顶部圆',
type: 'pictorialBar',
z: 3,
symbolSize: ['62%', '6'],
symbolSize: ['65%', '5'],
symbolOffset: [0.1, -3],
symbolPosition: "end",
itemStyle: {
color: "rgba(51, 221, 221, 0.8)",
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(2, 206, 214, 0.8)' }, // 更暗的左侧颜色,增强阴影效果
{ offset: 1, color: 'rgba(25, 217, 170, 0.8)' } // 右侧亮色,增强高光效果
]),
},
// opacity: 0.1,
emphasis: {
itemStyle: {
shadowColor: 'rgba(0, 255, 255, 0.8)',
shadowColor: "rgba(51, 221, 221, 0.9)",
shadowBlur: 12
}
}