jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-27 18:59:26 +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, global: false,
showSymbol: false, showSymbol: false,
yAxisIndex: index,
data: result.values[index] data: result.values[index]
} }
}) })
@@ -193,19 +194,40 @@ export default {
color: '#fff' color: '#fff'
} }
}, },
yAxis: { yAxis: [
type: 'value', {
splitLine: { name: '充电电量(kW·h)',
lineStyle: { type: 'dashed', color: '#435463' } type: 'value',
nameTextStyle: {
color: '#fff' // 绿色名称
},
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
}, },
axisLabel: { {
// margin: 10, name: '充电收益(元)',
// interval: 60, type: 'value',
color: '#fff', splitLine: {
fontSize:12, lineStyle: { type: 'dashed', color: '#435463' }
// padding: [5, 0, 0, 0] },
} nameTextStyle: {
}, color: '#fff' // 绿色名称
},
axisLabel: {
interval: 4,
color: '#fff',
fontSize:12
},
},
],
series: this.chargeChartData.ydata series: this.chargeChartData.ydata
} }
option && chargeChart.setOption(option) option && chargeChart.setOption(option)

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

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

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

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

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

@@ -95,6 +95,39 @@ export default {
type: 'line', type: 'line',
smooth:false, smooth:false,
dataKey: 'chargeDischarge', 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: [ infoKeys: [
{ {

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

@@ -112,16 +112,82 @@ export default {
title: '运行状态分析', title: '运行状态分析',
type: 'bar', type: 'bar',
dataKey: 'users', 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: [ infoKeys: [
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' }, { key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
{ key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' }, // { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' }, 暂无数据
{ key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' } // { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
] ]
}, },
{ {
title: '今日电压与电流分析', title: '今日电压与电流分析',
type: 'line', type: 'line',
dataKey: 'stock', 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: [ infoKeys: [
{ {
key: 'V', key: 'V',
@@ -172,13 +238,46 @@ export default {
infoKeys: [ infoKeys: [
{ key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' }, { key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' },
{ key: 'key3', label: '日故障次数', lineColor: '#5AABF2' }, { key: 'key3', label: '日故障次数', lineColor: '#5AABF2' },
{ key: 'key3', label: '日充电时长', lineColor: '#5AABF2' } // { key: 'key3', label: '日充电时长', lineColor: '#5AABF2' }
] ]
}, },
{ {
title: '今日电压与电流分析', title: '今日电压与电流分析',
type: 'line', type: 'line',
dataKey: 'stock', 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: [ infoKeys: [
{ {
key: 'V', key: 'V',
@@ -227,13 +326,46 @@ export default {
dataKey: 'users', dataKey: 'users',
infoKeys: [ infoKeys: [
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' }, { key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
{ key: 'key3', label: '日发电时长', lineColor: '#5AABF2' } // { key: 'key3', label: '日发电时长', lineColor: '#5AABF2' }
] ]
}, },
{ {
title: '今日电压与电流分析', title: '今日电压与电流分析',
type: 'line', type: 'line',
dataKey: 'stock', 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: [ infoKeys: [
{ {
key: 'V', key: 'V',