149 lines
4.1 KiB
TypeScript
149 lines
4.1 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'
|
||
|
||
export const includes = ['title', 'grid3D', 'xAxis3D', 'yAxis3D', 'zAxis3D']
|
||
// 基于准备好的dom，初始化echarts实例
|
||
// var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
// 从图片中估算的数据
|
||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||
const values = [88, 54, 66, 54, 89, 67, 54, 89, 54, 89, 54, 67];
|
||
|
||
// 将数据转换为 bar3D 需要的格式 [x, y, z]
|
||
const data = values.map((item, index) => {
|
||
// x 对应 xAxis3D 的类目索引，y 对应 yAxis3D 的类目索引，z 对应 zAxis3D 的数值
|
||
return [index, 0, item];
|
||
});
|
||
|
||
|
||
const option = {
|
||
// 图表标题，用于显示左上角的单位
|
||
title: {
|
||
text: '单位：万kWh',
|
||
left: '2%', // 调整位置
|
||
top: '2%',
|
||
textStyle: {
|
||
color: '#e0e0e0', // 使用稍亮的颜色以适应深色背景
|
||
fontSize: 16
|
||
}
|
||
},
|
||
// 背景色，使用线性渐变模拟图片效果
|
||
backgroundColor: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0, color: '#0f375f' // 起始颜色
|
||
}, {
|
||
offset: 1, color: '#000918' // 结束颜色
|
||
}],
|
||
global: false
|
||
},
|
||
// 3D笛卡尔坐标系配置
|
||
grid3D: {
|
||
boxWidth: 200,
|
||
boxDepth: 80,
|
||
// 视角控制，用于调整图表的观察角度
|
||
viewControl: {
|
||
distance: 250, // 初始视角距离
|
||
alpha: 15, // 俯视角度
|
||
beta: 25, // 旋转角度
|
||
autoRotate: false, // 禁止自动旋转
|
||
minAlpha: 5, // 最小俯视角度
|
||
maxAlpha: 90, // 最大俯视角度
|
||
},
|
||
axisPointer: {
|
||
show: false // 不显示坐标轴指示器
|
||
},
|
||
// 光照配置，这是实现立体感和阴影的关键
|
||
light: {
|
||
// 主光源
|
||
main: {
|
||
intensity: 1.2, // 光照强度
|
||
shadow: true, // 开启阴影
|
||
shadowQuality: 'ultra', // 更高的阴影质量
|
||
alpha: 55, // 控制光源的水平角度，使其从右侧照射，从而在左侧形成阴影
|
||
beta: 40 // 控制光源的垂直角度，使其从上方照射
|
||
},
|
||
// 环境光，用于整体提亮
|
||
ambient: {
|
||
intensity: 0.3
|
||
}
|
||
}
|
||
},
|
||
// X轴（类目轴）
|
||
xAxis3D: {
|
||
type: 'category',
|
||
data: months,
|
||
axisLabel: {
|
||
color: '#d0d0d0',
|
||
fontSize: 14
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#d0d0d0'
|
||
}
|
||
}
|
||
},
|
||
// Y轴（在图中是隐藏的，但 bar3D 渲染需要此轴）
|
||
yAxis3D: {
|
||
type: 'category',
|
||
show: false // 不显示Y轴
|
||
},
|
||
// Z轴（数值轴）
|
||
zAxis3D: {
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
interval: 25, // 刻度间隔
|
||
axisLabel: {
|
||
color: '#d0d0d0',
|
||
fontSize: 12
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#d0d0d0'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.15)' // 分割线颜色
|
||
}
|
||
}
|
||
},
|
||
// 系列列表
|
||
series: [{
|
||
type: 'bar3D',
|
||
data: data,
|
||
barSize: 15, // 柱子在 X, Y 轴上的尺寸
|
||
// 柱状图的着色效果
|
||
shading: 'lambert', // 使用 Lambert 光照模型，能更好地表现光照和阴影
|
||
// 柱子的样式
|
||
itemStyle: {
|
||
color: '#4bebf3' // 柱子的基础颜色，光照会在此基础上计算最终颜色
|
||
},
|
||
// 鼠标悬浮时的高亮状态
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
// myChart.setOption(option);
|
||
|
||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||
public key: string = EnergyConsumptionTrendConfig.key
|
||
public chartConfig = cloneDeep(EnergyConsumptionTrendConfig)
|
||
// 图表配置项
|
||
public option = echartOptionProfixHandle(option, includes)
|
||
}
|