初次提交

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

@@ -0,0 +1,202 @@
+<template>
+  <div class="left-center-warp">
+
+    <item :title="'电站区域分布'">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="chart-box">
+        <Chart :options="options" :class-name="'chart'" />
+      </div></item>
+
+  </div>
+
+</template>
+
+<script>
+import item from './item-warp.vue'
+import { GetRegionalDistribution } from '@/api/screen/zzScreen'
+
+export default {
+  components: { item },
+  data() {
+    return {
+      options: {},
+      loading: true
+    }
+  },
+  methods: {
+    async getData(deptId) {
+      try {
+        this.loading = true
+        const res = await GetRegionalDistribution({
+          deptId: deptId
+        })
+        this.initChart(res.data)
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    initChart(val) {
+      if (val.length) {
+        val.sort((a, b) => b.regionValue - a.regionValue)
+
+        var ydata = []
+        var legend = []
+        val.forEach(i => {
+          const param = {
+            name: i.addName,
+            value: i.regionValue
+          }
+          legend.push(param.name)
+          ydata.push(param)
+        })
+        const count = this.arrCount(ydata)
+        this.options = {
+          title: [{
+            text: '电站总数',
+            subtext: count,
+
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 37,
+              fontWeight: 500
+
+            },
+
+            left: '35%',
+            top: '40%',
+            padding: [0, 0],
+            textStyle: {
+              color: '#fff',
+              fontSize: 18
+            },
+            textAlign: 'center'
+
+          }],
+          tooltip: {},
+          legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            right: 10,
+            top: 20,
+            bottom: 20,
+            padding: [0, 10],
+            data: legend,
+            icon: 'circle',
+            align: 'left',
+            itemWidth: 8,
+            itemHeight: 8,
+            itemGap: 15,
+            textStyle: {
+              color: '#fff',
+              rich: {
+                name: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                  padding: [0, 10, 0, 0]
+                },
+                num: {
+                  fontSize: 16,
+                  color: '#ffffff'
+                },
+                unit: {
+                  fontSize: 16,
+                  color: '#ffffff'
+                }
+              }
+            },
+            formatter: function(name) {
+              const val = ydata.filter(item => {
+                return item.name === name
+              })
+              const num = (((val[0].value / count)) * 100).toFixed(2)
+              return [
+                `{name|${name.length > 5 ? name.slice(0, 2) : name}}`,
+                `{num|${num}}{unit|%}`
+              ].join(' ')
+            }
+
+          },
+          series: [{
+            name: '电站个数',
+            type: 'pie',
+            clockwise: false, // 饼图的扇区是否是顺时针排布
+            minAngle: 20, // 最小的扇区角度（0 ~ 360）
+            radius: ['60%', '75%'],
+            center: ['35%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: { // 图形样式
+              normal: {
+                borderColor: '#070A0C',
+                borderWidth: 5
+              }
+            },
+            label: {
+              normal: {
+                show: false
+              },
+              emphasis: {
+                show: false,
+                position: 'outer',
+                alignTo: 'edge',
+                margin: 10,
+                formatter: '{text|{b}}\n{value|{d}%}',
+                rich: {
+                  text: {
+                    fontSize: 14,
+                    align: 'center',
+                    verticalAlign: 'middle',
+                    padding: 5
+                  },
+                  value: {
+                    fontSize: 24,
+                    align: 'center',
+                    verticalAlign: 'middle'
+                  }
+                }
+              }
+            },
+            data: ydata
+          }]
+        }
+      } else {
+        this.options = {
+          title: {
+            text: '暂无数据',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              fontSize: 14,
+              color: 'rgb(153, 153, 153)',
+              fontWeight: 'normal'
+            }
+          }
+        }
+      }
+    },
+    arrCount(arr) {
+      let count = 0
+      arr.forEach(item => {
+        count = count + item.value
+      })
+      return count
+    }
+
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.left-center-warp {
+  width: 100%;
+  height: 100%;
+
+  .chart-box {
+    width: 100%;
+    height: 100%;
+  }
+
+}
+</style>