做一名合格的搬运工——学会看懂公司项目（1）

作为一名合格的搬运工一定要学会搬砖技巧，既然技不如人又不会设计制造零件，那么搬运总要会的啊！

说实话话，当我看到这样的原型图我是有点崩溃的，毕竟不是做前端的（但是，无论你做任何技术，你最好都要都懂点，这样吹逼嘛也能吹点三 ）

咋一看有这么几个难点需要解决：

1. 布局
2. 图形化可视图

布局问题

首先来看看大佬写的其他页面布局是怎么用的


el-row与el-col都是element 框架的东西，查文档发现:gutter表示el-col的间隔距离，:span表示以24栅格化布局下的大小分配占比，如上面一个下有两块，一个占17一个占7合起来正好24，间隔为8

布局问题搞定，可以搬砖复制粘贴了~芜湖

---

数据可视化

我记得有Echarts和G2都是做这个的额，做不来别慌，赶紧看看大佬怎么写的

标签是啥，看看是不是自定义的

果然是自己注册的组件，那继续看是怎么实现的

<template>
  <div class="bar" />
</template>
<script>
import G2 from '@antv/g2'
import resize from '@/utils/resize'
import { mapGetters } from 'vuex'
export default {
  name: 'Bar',
  mixins: [resize],
  props: {
    height: {
      type: Number,
      default: 200
    },
    pieData: { // 单折线图的数据
      type: Array,
      required: true
    },
    options: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      darkTheme: {
        textStyle: {
          fill: '#7189C8'
        }
      },
      defaultTheme: {
        textStyle: {
          fill: '#404040'
        }
      }
    }
  },
  computed: {
    ...mapGetters(['isDarkTheme'])
  },
  watch: {
    pieData() {
      this.$nextTick(() => {
        this.changeChart()
      })
    },
    isDarkTheme() {
      this.changeRender()
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const _this = this
      const chart = new G2.Chart({
        container: _this.$el,
        forceFit: true,
        height: _this.height,
        padding: 'auto'
      })
      this.chart = chart
      chart.source(this.pieData)
      chart.coord('theta', {
        radius: 0.75
      })
      chart.tooltip(false)
      this.renderFn(chart)
    },
    changeChart() {
      this.chart.changeData(this.pieData)
    },
    changeRender() {
      this.chart.clear()
      this.renderFn(this.chart)
    },
    renderFn(chart) {
      const currentTheme = this.isDarkTheme ? this.darkTheme : this.defaultTheme
      const unit = this.options.unit || ''
      const { x, y } = this.options
      chart.legend(currentTheme)
      chart.intervalStack().position(y).color(x).label(y, {
        formatter: function formatter(val, item) {
          return item.point.name + ': ' + val + unit
        },
        textStyle: currentTheme.textStyle
      })
      chart.render()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

我去，又对g2的饼图封装了一次，看不懂啊，赶紧看看g2原版

在看看项目中的返回数据是怎么封装的

原版是对于是把数据直接封装到data，项目中是封装到overCounts，来看看overCounts是啥

getData() {
      this.listLoading = true
      Promise.all([getDashboardData(this.listQuery), getAvgList(this.listQuery)])
        .then(response => {
          this.listLoading = false
          const { dataRate, overCc, rainCc, sewageCc, waterFlow, normalCompanyCount, overCompanyCount, overCounts } = response[0].data
          this.dataRate = dataRate
          this.overCc = overCc
          this.rainCc = rainCc
          this.sewageCc = sewageCc
          this.waterFlow = waterFlow
          this.overCompany = this.calcOverCompany(normalCompanyCount, overCompanyCount)
          const overTotal = overCounts.reduce((total, item) => {
            total += item.count
            return total
          }, 0)
          this.overCounts = overCounts.map(item => {
            const percent = (item.count / overTotal) * 100
            item.count = Number(percent.toFixed(2))
            item.name = item.factorName
            console.log(item)
            return item
          })
          this.avgList = response[1].data
        })
    },

overCounts只要是{name:xxx,count:xxxx}应该就可以呈现了

于是，看了好久发现大佬用了两个高级函数(我之前是没有见过的).reduce()与.map()，主要是.map()可以改变数据体中的属性名使得能与:options中属性一致形成映射，太猛了

饼图中的百分比显示是通过Pie.vue组件中实现的

---

啊，所以说呢，自己不会造飞船不要紧，一定要会搬砖，如果你连搬砖都不会，那就没有了路，没有了路，谈何门呢？

每天向大佬学习一点点，做一名合格的搬运工，门就应该不远了，吧。

不行，再吐槽哈，前端是真的难。