190 lines
4.0 KiB
TypeScript
190 lines
4.0 KiB
TypeScript
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
|
import { EnergyConsumptionTrendConfig } from './index'
|
|
import { CreateComponentType } from '@/packages/index.d'
|
|
import cloneDeep from 'lodash/cloneDeep'
|
|
import dataJson from './data.json'
|
|
import * as echarts from 'echarts'
|
|
|
|
export const includes = []
|
|
const otherOption = {
|
|
unit: '万kwh',
|
|
}
|
|
|
|
const option = {
|
|
...otherOption,
|
|
dataset: dataJson,
|
|
// 添加标题配置
|
|
title: {
|
|
text: '单位：' + otherOption.unit,
|
|
left: '3%',
|
|
top: '3%',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
fontWeight: 'normal'
|
|
}
|
|
},
|
|
// 提示框配置
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
|
borderColor: '#00ffff',
|
|
textStyle: {
|
|
color: '#ffffff'
|
|
}
|
|
},
|
|
// 网格配置
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
|
|
// X轴配置
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
//
|
|
axisLabel: {
|
|
color: '#eee',
|
|
interval: 0,
|
|
fontSize: 9,
|
|
margin: 20
|
|
}
|
|
|
|
},
|
|
|
|
// Y轴配置
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
interval: 25,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
formatter: '{value}'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.1)',
|
|
type: 'solid'
|
|
}
|
|
}
|
|
},
|
|
|
|
// 数据系列配置
|
|
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' } // 右侧亮色，增强高光效果
|
|
]),
|
|
opacity: 0.60,
|
|
// 添加更强的3D效果
|
|
shadowBlur: 20,
|
|
shadowColor: 'rgba(0, 0, 0, 0.7)',
|
|
shadowOffsetX: -5,
|
|
shadowOffsetY: 5,
|
|
borderRadius: [0, 0, 4, 4],
|
|
borderWidth: 0,
|
|
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowColor: 'rgba(0, 255, 255, 0.9)',
|
|
shadowBlur: 25,
|
|
shadowOffsetX: -8,
|
|
shadowOffsetY: 8
|
|
}
|
|
},
|
|
// })),
|
|
|
|
barWidth: '45%',
|
|
|
|
// 3D圆柱体效果
|
|
roundCap: false
|
|
}, {
|
|
name: '顶部圆',
|
|
type: 'pictorialBar',
|
|
z: 3,
|
|
symbolSize: ['62%', '6'],
|
|
symbolOffset: [0.1, -3],
|
|
symbolPosition: "end",
|
|
itemStyle: {
|
|
color: "rgba(51, 221, 221, 0.8)",
|
|
},
|
|
// opacity: 0.1,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowColor: 'rgba(0, 255, 255, 0.8)',
|
|
shadowBlur: 12
|
|
}
|
|
}
|
|
},
|
|
],
|
|
|
|
// 图形元素配置
|
|
graphic: [{
|
|
// 左侧阴影效果
|
|
type: 'rect',
|
|
left: 0,
|
|
top: '15%',
|
|
width: '25%',
|
|
bottom: '3%',
|
|
style: {
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 更强的左侧阴影
|
|
{ offset: 1, color: 'rgba(0, 0, 0, 0)' }
|
|
])
|
|
},
|
|
z: -1
|
|
}, {
|
|
// 底部阴影效果
|
|
type: 'rect',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '0',
|
|
height: '10%',
|
|
style: {
|
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(0, 0, 0, 0)' },
|
|
{ offset: 1, color: 'rgba(0, 0, 0, 0.6)' } // 底部阴影
|
|
])
|
|
},
|
|
z: -1
|
|
}]
|
|
};
|
|
|
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
|
public key: string = EnergyConsumptionTrendConfig.key
|
|
public chartConfig = cloneDeep(EnergyConsumptionTrendConfig)
|
|
// 图表配置项
|
|
public option = echartOptionProfixHandle(option, includes)
|
|
}
|