zS/go-viee-fetch-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Free-sss 2025-09-03 22:27:23 +08:00
parent 6e7ace57bb
commit c065bc4cfd
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.ts
View File

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