用CSS Flex 佈局繪製柱狀圖 Bar chart

關於flex佈局，能夠看我這篇 圖解Flex佈局

本文基於的框架：微信小程序、uniapp（Vue.js）、SCSS。原理是同樣的，我就不轉換成原生的Vue.js和css了。

原理：

模板：

v-for="i in 5" 循環顯示5個bar

:style="{ 'height': readingHoursHeight[i] + 'px' 根據readingHoursHeight的數據動態設置bar的高度

{{ readingHours[i] }} 顯示數字標籤

<view class="container">
    <!-- 循環顯示5個bar -->
    <view v-for="i in 5" :key="i" class="bar-item-box">
    {{ readingHours[i] }}
    <view class="bar-item" :style="{ 'height': readingHoursHeight[i] + 'px' }"></view>
    </view>
</view>

JS：

模擬數據

data () {
  return {
    bookId: '',

    // 模擬每日讀書時長
    readingHours: [10, 30, 20, 100, 49],

    // 計算時長的高度
    readingHoursHeight: []
  }
},

計算每一個時長對應的bar高度

// 計算bar的高度
computeBarHeight: function () {
  // 先備份this，待會在uni的方法裏會被覆蓋
  var _this = this

  // box的高度
  var boxHeight = 0

  // 獲取最長的時長，做爲最大的高度
  var max = this.maxHours(this.readingHours)

  // uniapp的方法，能夠改成vuejs的方法
  uni.getSystemInfo({
    success: function (res) { // res - 各類參數
      let info = uni.createSelectorQuery().select('.bar-chart-box')

      info.boundingClientRect(function (data) { // data - 各類參數
        // 獲取box元素高度
        boxHeight = data.height - 20

        // 計算每一個時長佔最大高度的比例來設置高度
        for (let i = 0; i < _this.readingHours.length; i++) {
          let h = _this.readingHours[i] / _this.readingHours[max] * boxHeight

          // 把計算好的高度push到readingHoursHeight數組裏
          _this.readingHoursHeight.push(h)
        }
      }).exec()
    }
  })
},

// 獲取最大時長
maxHours: function (arr) {
  var max = 0

  for (let i = 1; i < arr.length; i++) {
    if (arr[i] > arr[max]) {
      max = i
    }
  }
  return max
}

SCSS：

.bars {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
  align-items: flex-end;
  border-bottom: #efefef 2rpx solid;
  margin-bottom: 20rpx;

  .bar-item-box {
    flex: 0.1;
    text-align: center;
    color: #9b9b9b;
  }
}

Exchange blogroll： http://laker.me/blog
Github： https://github.com/younglaker