echarts图表双轴优化

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: {
+        yAxis: [
+          {
+            name: '充电电量(kW·h)',
             type: 'value',
+            nameTextStyle: {
+              color: '#fff' // 绿色名称
+            },
             splitLine: {
               lineStyle: { type: 'dashed', color: '#435463' }
             },
             axisLabel: {
-            // margin: 10,
+              interval: 4,
-            // interval: 60,
               color: '#fff',
-            fontSize:12,
+              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)

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,24 +114,21 @@ export default {
           
 
         },
-        yAxis: {
+        yAxis:yAxisOption&&yAxisOption.length?
+          yAxisOption: {
             type: 'value',
-          axisLine: {
+            nameTextStyle: {
-            show: true,
-            lineStyle: {
-              color: '#fff' // y轴线颜色
-            }
-          },
-          axisLabel: {
               color: '#fff' 
             },
-          
             splitLine: {
-            lineStyle: {
+              lineStyle: { type: 'dashed', color: '#435463' }
-              color: '#A6B8DD', // 网格线颜色,
+            },
-              type: 'dashed'
+            axisLabel: {
-            }
+              interval: 4,
-          }
+              color: '#fff',
+              fontSize:12
+
+            },
           },
         series: infoKeys.map((info, i) => {
           return {
@@ -139,6 +136,7 @@ export default {
             smooth: smooth || false,
             type: type,
             data: this.chartData.ydata[info.key],
+            index:i,
             ...info.seriesOptions,
           }
         })

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,7 +148,8 @@ export default {
           axisLine: { lineStyle: { color: '#fff' } },
           axisLabel: { color: '#fff' },
         },
-        yAxis: {
+        yAxis: option.yAxisOption &&option.yAxisOption.length?option.yAxisOption:
+          {
             type: 'value',
             splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
             axisLabel: { color: '#fff' },
@@ -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],
             })),
           });

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: [
      
             {

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: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' }, 暂无数据
-                { 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',
@@ -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',