diff --git a/web/src/components/Home/Charge.vue b/web/src/components/Home/Charge.vue index a839e57..9c7417d 100644 --- a/web/src/components/Home/Charge.vue +++ b/web/src/components/Home/Charge.vue @@ -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) diff --git a/web/src/components/predict/predictEcharts.vue b/web/src/components/predict/predictEcharts.vue index 70a2f6a..dce1df8 100644 --- a/web/src/components/predict/predictEcharts.vue +++ b/web/src/components/predict/predictEcharts.vue @@ -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, } }) diff --git a/web/src/components/statisticalAnalysis/energyEchart.vue b/web/src/components/statisticalAnalysis/energyEchart.vue index 8a2e43a..0fc8817 100644 --- a/web/src/components/statisticalAnalysis/energyEchart.vue +++ b/web/src/components/statisticalAnalysis/energyEchart.vue @@ -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], })), }); diff --git a/web/src/views/predict.vue b/web/src/views/predict.vue index 551f473..699b920 100644 --- a/web/src/views/predict.vue +++ b/web/src/views/predict.vue @@ -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: [ { diff --git a/web/src/views/statisticalAnalysis.vue b/web/src/views/statisticalAnalysis.vue index 3885a07..2b7a389 100644 --- a/web/src/views/statisticalAnalysis.vue +++ b/web/src/views/statisticalAnalysis.vue @@ -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',