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

<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>