初次提交

src/views/new-screen-zz/components/center-bottom.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="center-bottom-warp">
+    <item :title="'日充放电对比'">
+      <dv-loading v-if="Loading">Loading...</dv-loading>
+      <Chart v-else :options="options" />
+    </item>
+  </div>
+</template>
+
+<script>
+import item from './item-warp.vue'
+import { GetChargeDailyChart } from '@/api/screen/zzScreen'
+import dayChargeIcon from '../../../assets/new-screen/dayCharge-icon.png'
+import dayDischargeIcon from '../../../assets/new-screen/dayDischarge-icon.png'
+export default {
+  components: { item },
+  data() {
+    return {
+      options: {},
+      Loading: true
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    async getData(deptId) {
+      try {
+        this.Loading = true
+        const { data } = await GetChargeDailyChart({
+          deptId: deptId
+        })
+        this.initChart(data)
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.Loading = false
+      }
+
+      // data.splice(0, 3)
+    },
+    initChart(data) {
+      if (data.length) {
+        const x_data = []
+
+        const dayCharge = []
+        const dayDischarge = []
+        data.forEach((el) => {
+          x_data.push(el.time)
+          dayCharge.push(el.dayCharge)
+          dayDischarge.push(el.dayDischarge)
+        })
+        this.options = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            orient: 'horizontal',
+            right: 30,
+            itemWidth: 14,
+            data: [
+              { icon: 'image://' + dayChargeIcon, name: '充电' },
+              { icon: 'image://' + dayDischargeIcon, name: '放电' }
+            ]
+
+          },
+
+          grid: {
+            left: '5%',
+            top: '13%',
+            right: '5%',
+            bottom: '10%'
+          },
+          xAxis: [{
+            data: x_data,
+            axisLabel: {
+              textStyle: {
+                color: '#6E7174'
+              },
+              margin: 10 // 刻度标签与轴线之间的距离。
+            },
+
+            axisLine: {
+              show: false // 不显示x轴
+            },
+            axisTick: {
+              show: false // 不显示刻度
+            },
+            boundaryGap: true,
+            splitLine: {
+              show: false,
+              width: 0.08,
+              lineStyle: {
+                type: 'solid',
+                color: '#03202E'
+              }
+            }
+          }],
+          yAxis: [{
+            name: 'kWh',
+            nameTextStyle: {
+              color: '#6E7174',
+              fontSize: 12,
+              padding: [0, 0, 0, -40]
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: '#eee',
+                type: 'solid'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#6E7174'
+              }
+            }
+          }],
+          series: [
+
+            // 柱体
+            {
+              name: '充电',
+              type: 'bar',
+
+              barGap: '20%',
+              barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
+              itemStyle: {
+                'normal': {
+                  'color': {
+                    'x': 0,
+                    'y': 0,
+                    'x2': 0,
+                    'y2': 1,
+                    'type': 'linear',
+                    'global': false,
+                    'colorStops': [{ // 第一节下面
+                      'offset': 0,
+                      'color': 'rgba(0, 243, 253, 1)'
+                    }, {
+                      'offset': 1,
+                      'color': 'rgba(0, 243, 253, 0.2)'
+                    }]
+                  }
+                }
+              },
+
+              data: dayCharge
+            },
+            {
+              name: '放电',
+              type: 'bar',
+              barGap: '20%',
+              barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
+              itemStyle: {
+                'normal': {
+                  'color': {
+                    'x': 0,
+                    'y': 0,
+                    'x2': 0,
+                    'y2': 1,
+                    'type': 'linear',
+                    'global': false,
+                    'colorStops': [{ // 第一节下面
+                      'offset': 0,
+                      'color': 'rgba(253, 228, 0, 1)'
+                    }, {
+                      'offset': 1,
+                      'color': 'rgba(253, 228, 0, 0.2)'
+                    }]
+                  }
+                }
+              },
+
+              data: dayDischarge
+            }
+
+          ]
+        }
+      } else {
+        this.options = {
+          title: {
+            text: '暂无数据',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              fontSize: 14,
+              color: 'rgb(153, 153, 153)',
+              fontWeight: 'normal'
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.center-bottom-warp {
+  width: 100%;
+  height: 100%;
+}
+</style>