jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-28 03:09:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

echarts图表双轴优化

Browse Source
This commit is contained in:
ym1026
2025-10-10 11:01:13 +08:00
parent 0975ea52d4
commit b12aca76c4
5 changed files with 237 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/src/components/Home/Charge.vue
View File

@@ -148,6 +148,7 @@ export default {
},
global: false,
showSymbol: false,
yAxisIndex: index,
data: result.values[index]
}
})
@@ -193,19 +194,40 @@ export default {
color: '#fff'
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
yAxis: [
{
name: '充电电量(kW·h)',
type: 'value',
nameTextStyle: {
color: '#fff' // 绿色名称
},
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
axisLabel: {
// margin: 10,
// interval: 60,
color: '#fff',
fontSize:12,
// padding: [5, 0, 0, 0]
}
},
{
name: '充电收益(元)',
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
nameTextStyle: {
color: '#fff' // 绿色名称
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
],
series: this.chargeChartData.ydata
}
option && chargeChart.setOption(option)

38
web/src/components/predict/predictEcharts.vue
View File

@@ -45,14 +45,14 @@ export default {
},
methods: {
initCharts() {
const {infoKeys,dataKey,type,smooth}=this.chartOptions
const {infoKeys,dataKey,type,smooth,yAxisOption}=this.chartOptions
const dom = this.$refs.chartContainer
if (!dom) return
const chart = this.$echarts.init(dom)
this.chartInstances.push(chart) // 存储实例
console.log(yAxisOption,"yAxisOption")
// 设置图表配置
chart.setOption({
tooltip: {
@@ -114,31 +114,29 @@ export default {
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#fff' // y轴线颜色
}
yAxis:yAxisOption&&yAxisOption.length?
yAxisOption: {
type: 'value',
nameTextStyle: {
color: '#fff'
},
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
axisLabel: {
color: '#fff'
},
splitLine: {
lineStyle: {
color: '#A6B8DD', // 网格线颜色,
type: 'dashed'
}
}
},
series: infoKeys.map((info, i) => {
return {
name: info.label,
smooth: smooth || false,
type: type,
data: this.chartData.ydata[info.key],
index:i,
...info.seriesOptions,
}
})

21
web/src/components/statisticalAnalysis/energyEchart.vue
View File

@@ -63,6 +63,10 @@ export default {
tableData: {
type: Array,
default: () => [] // 默认空对象
},
yAxisOption:{
type: Array,
default: () => [] // 默认空对象
}
},
data() {
@@ -122,6 +126,7 @@ export default {
},
// 公共 ECharts 配置
getCommonOption(option, dataKeys, isLineChart = false) {
console.log(option,"ooooooooooooo")
return {
tooltip: {
trigger: 'axis',
@@ -143,11 +148,12 @@ export default {
axisLine: { lineStyle: { color: '#fff' } },
axisLabel: { color: '#fff' },
},
yAxis: {
type: 'value',
splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
axisLabel: { color: '#fff' },
},
yAxis: option.yAxisOption &&option.yAxisOption.length?option.yAxisOption:
{
type: 'value',
splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
axisLabel: { color: '#fff' },
},
};
},
generateTimePoints() {
@@ -186,6 +192,7 @@ export default {
const commonOption = this.getCommonOption(option, dataKeys);
chart.setOption({
...commonOption,
series: option.infoKeys.map((info, i) => ({
name: info.label,
@@ -195,6 +202,8 @@ export default {
borderRadius: [10, 10, 0, 0],
color: info.lineColor,
},
index:option.yAxisOption&&option.yAxisOption.length?i:1,
data: processData(this.chartData, dataKeys).values[i],
})),
});
@@ -253,6 +262,8 @@ export default {
],
},
},
index:option.yAxisOption&&option.yAxisOption.length?i:1,
data: this.chartDatav[info.key],
})),
});

33
web/src/views/predict.vue
View File

@@ -95,6 +95,39 @@ export default {
type: 'line',
smooth:false,
dataKey: 'chargeDischarge',
yAxisOption:[
{
name: '发电功率(W)',
type: 'value',
nameTextStyle: {
color: '#fff'
},
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
{
name: '发电量(kw·h)',
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
nameTextStyle: {
color: '#fff'
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
],
infoKeys: [
{

140
web/src/views/statisticalAnalysis.vue
View File

@@ -112,16 +112,82 @@ export default {
title: '运行状态分析',
type: 'bar',
dataKey: 'users',
yAxisOption:[
{
name: '日故障次数(V)',
type: 'value',
nameTextStyle: {
color: '#fff'
},
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
// {
// name: '工作时长(h)',
// type: 'value',
// splitLine: {
// lineStyle: { type: 'dashed', color: '#435463' }
// },
// nameTextStyle: {
// color: '#fff'
// },
// axisLabel: {
// interval: 4,
// color: '#fff',
// fontSize:12
// },
// },
],
infoKeys: [
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
{ key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
{ key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
// { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' }, 暂无数据
// { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
]
},
{
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
yAxisOption:[
{
name: '电压(V)',
type: 'value',
nameTextStyle: {
color: '#fff'
},
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
{
name: '电流(A)',
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
nameTextStyle: {
color: '#fff'
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
],
infoKeys: [
{
key: 'V',
@@ -172,13 +238,46 @@ export default {
infoKeys: [
{ key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' },
{ key: 'key3', label: '日故障次数', lineColor: '#5AABF2' },
{ key: 'key3', label: '日充电时长', lineColor: '#5AABF2' }
// { key: 'key3', label: '日充电时长', lineColor: '#5AABF2' }
]
},
{
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
yAxisOption:[
{
name: '电压(V)',
type: 'value',
nameTextStyle: {
color: '#fff'
},
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
{
name: '电流(A)',
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
nameTextStyle: {
color: '#fff'
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
],
infoKeys: [
{
key: 'V',
@@ -227,13 +326,46 @@ export default {
dataKey: 'users',
infoKeys: [
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
{ key: 'key3', label: '日发电时长', lineColor: '#5AABF2' }
// { key: 'key3', label: '日发电时长', lineColor: '#5AABF2' }
]
},
{
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
yAxisOption:[
{
name: '电压(V)',
type: 'value',
nameTextStyle: {
color: '#fff'
},
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
{
name: '电流(A)',
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
nameTextStyle: {
color: '#fff'
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
],
infoKeys: [
{
key: 'V',