style【能源场景】:微调样式
This commit is contained in:
parent
6e7ace57bb
commit
c065bc4cfd
@ -7,7 +7,7 @@ import * as echarts from 'echarts'
|
|||||||
|
|
||||||
export const includes = []
|
export const includes = []
|
||||||
const otherOption = {
|
const otherOption = {
|
||||||
secneID:'',
|
secneID: '',
|
||||||
unit: dataJson.unit,
|
unit: dataJson.unit,
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user