冲突文件处理

src/views/dashboardtest/components/bottom-left/standard-215.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bottom-left-wrapper">
-    <ItemBox :title=" $t('dashboard.chargingDischarging') ">
+    <ItemBox :title=" $t('dashboard.chargingDischarging')">
       <div slot="header">
         <div class="header-right-box">
           <div class="header-title" :class="{'active':currentType === 'day'}" @click="selectTime('day')">{{ $t('dashboard.sevenDay') }}</div>
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+// import * as echarts from 'echarts'
 import { GetPCSElecData } from '@/api/home-page/index'
 
 export default {
@@ -78,16 +78,26 @@ export default {
       this.powerOptions = {
         grid: {
           top: '25%',
-          left: '10%',
+          left: '5%',
           right: '10%',
           bottom: '5%',
           containLabel: true
         },
-        legend: {},
+        legend: {
+          icon: 'circle',
+          itemWidth: 10,
+          itemHeight: 10,
+          top: 10,
+          right: 10,
+          data: [
+            { name: `${this.$t('dashboard.charging')}`, itemStyle: { color: '#0091DB' }},
+            { name: `${this.$t('dashboard.disCharging')}`, itemStyle: { color: '#FFFFFF' }}
+          ]
+        },
         tooltip: {
           trigger: 'axis',
-          backgroundColor: 'rgba(0,0,0,0,)',
+          backgroundColor: 'rgba(0,0,0,0)',
-          borderColor: 'rgba(0,0,0,0,);',
+          borderColor: 'rgba(0,0,0,0)',
           borderWidth: 0,
           textStyle: {
             width: 160,
@@ -101,9 +111,17 @@ export default {
             // 获取xAxis data中的数据
             let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
             params.forEach(item => {
+              let gradientStyle = ''
+              if (item.seriesName === this.$t('dashboard.charging')) {
+                // 充电：深蓝渐变
+                gradientStyle = 'background: #0091DB'
+              } else {
+                // 放电：白色渐变
+                gradientStyle = 'background: #FFFFFF'
+              }
               dataStr += `<div>
                     <div style="margin: 0 8px;">
-                      <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[item.componentIndex]};"></span>
+                      <span style="display:inline-block;margin-right:5px;width:10px;height:10px;${gradientStyle};"></span>
                       <span>${item.seriesName}</span>
                       <span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
                     </div>
@@ -127,9 +145,8 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
             },
             axisLabel: {
               show: true,
-              color: '#CEEBFF'
+              color: '#00AEFF'
             },
-
             axisTick: {
               show: false
             }
@@ -138,7 +155,8 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
         yAxis: [
           {
             type: 'value',
-            name: `${this.$t('dashboard.chargingandDischarging')}(kWh)`,
+            // name: `${this.$t('dashboard.chargingandDischarging')}(kWh)`,
+            name: `kWh`,
             nameTextStyle: {
               color: ' rgba(255, 255, 255, 0.5)'
             },
@@ -165,12 +183,24 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
             // data: [219, 215, 216, 219, 220, 215, 214],
             data: charge_data,
             // barWidth: 14, // 柱状图的宽度
-            color: '#00C8FF',
+            color: 'rgb(0, 145, 219)',
             itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              borderWidth: 1,
-                { offset: 0, color: 'rgba(0,200,255,0.90)' },
+              borderColor: '#0091DB',
-                { offset: 1, color: 'rgba(0, 200, 255, 0.0)' }
+              borderType: 'solid',
-              ])
+              color: {
+                type: 'linear', // 线性渐变
+                x: 0, y: 0, x2: 0, y2: 1, // 从上到下渐变
+                colorStops: [{
+                  offset: 0, color: 'rgba(0, 145, 219, 0.5)'// 渐变起点颜色
+                }, {
+                  offset: 1, color: 'rgba(0, 145, 219, 0.0)'// 渐变终点颜色
+                }]
+              }
+              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              //   { offset: 0, color: 'rgba(0, 145, 219, 0.5)' },
+              //   { offset: 1, color: 'rgba(0, 145, 219, 0.0)' }
+              // ])
             }
           },
           {
@@ -179,12 +209,24 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
             data: discharge_data,
             // data: [206, 203, 204, 206, 210, 205, 206],
             // barWidth: 14, // 柱状图的宽度
-            color: '#CEEBFF',
+            color: 'rgb(255, 255, 255)',
             itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              borderWidth: 1,
-                { offset: 0, color: 'rgba(255, 184, 0,0.90)' },
+              borderColor: '#FFFFFF',
-                { offset: 1, color: 'rgba(255, 184, 0,0.00)' }
+              borderType: 'solid',
-              ])
+              color: {
+                type: 'linear', // 线性渐变
+                x: 0, y: 0, x2: 0, y2: 1, // 从上到下渐变
+                colorStops: [{
+                  offset: 0, color: 'rgba(255, 255, 255, 0.5)'// 渐变起点颜色
+                }, {
+                  offset: 1, color: 'rgba(255, 255, 255, 0.0)'// 渐变终点颜色
+                }]
+              }
+              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              //   { offset: 0, color: 'rgba(255, 255, 255,0.5)' },
+              //   { offset: 1, color: 'rgba(255, 255, 255,0.00)' }
+              // ])
             }
           }
 
@@ -195,6 +237,9 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
 }
 </script>
 <style lang="scss" scoped>
+.clor{
+  color: rgb(255, 255, 255);
+}
 .bottom-left-wrapper {
   width: 100%;
   height: 100%;