style【能源场景】:微调样式
This commit is contained in:
parent
6e7ace57bb
commit
c065bc4cfd
@ -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
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user