vue——echart例: 柱狀圖及高度自適應

1.安裝

npm install echarts -s

2.例——點擊tab切換時柱狀圖重繪，高度根據返回數據設置。

<template>
  <div>
      <ul id="tabs" class="tabs">
        <li class="tab" :class="{'active':tabIndex=='1'}" @click="reGetCount('1')">周</li>
        <li class="tab" :class="{'active':tabIndex=='2'}" @click="reGetCount('2')">月</li>
        <li class="tab" :class="{'active':tabIndex=='3'}" @click="reGetCount('3')">年</li>
      </ul>

      <div class="canvas">
        <div id="chart_bar" :style="{width: winWid+'px'}"></div>
      </div>
  </div>
</template>
<script>
　//按需引入
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入圖形組件
  require('echarts/lib/chart/pie')
  require('echarts/lib/chart/bar')
  require('echarts/lib/chart/line')
  // 引入提示框、title、圖例組件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/legend')

  export default {
    name: 'Echart',
    data() {
      return {
        tabIndex: '1',
        winWid: screen.availWidth,
        bar: {
          list: [],
          name: [],
          data: []
        },
        barHeight: 0,
        options_bar: {}
      }
    },
    mounted() {
      this.getCount();
    },
    methods: {
      getCount() {
        let _this = this,
          getParam = {
            param: {
              param1: ***,
              param2: _this.tabIndex
            }
          };
        _this.axios.get('***', {
          params: getParam
        }).then(function(res) {
          if (res.status == 200 && res.data.result == 0) {
            let _data = res.data.message;
            _this.bar.list = _data.list;
            _this.drawBar();
          } else {
            console.log('獲取數據失敗');
          }
        }).catch(function(err) {
          console.log(err);
        })
      },
      reGetCount(tab) {
        let _this = this;
        if (_this.tabIndex == tab) {
          return
        } else {
          _this.tabIndex = tab;
          _this.getCount();
        }
      },
      drawBar() {
        let _this = this,
          list = _this.bar.list;
        for (let i = 0; i < list.length; i++) {
          _this.bar.name[i] = list[i].name;
          _this.bar.data[i] = list[i].num;
        }

        let obj = document.getElementById('chart_bar'),
          chart_bar = echarts.init(document.getElementById('chart_bar'), );

        chart_bar.clear();//清空畫布
        chart_bar.setOption({
          title: {
            text: '排行榜'
          },
          tooltip: {//點擊圖形時顯示詳細數據
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['金額']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            name: '元',
            boundaryGap: true,
            axisLabel: {
              interval: 0,
              formatter: function(value) {//金額超過千顯示k
                var res = value;
                if (res >= 1000) {
                  res = res / 1000 + res % 1000 + 'k';
                }
                return res;
              }
            }
          },
          yAxis: {
            type: 'category',
            name: '姓名',
            minInterval: 1,
            boundaryGap: [0, 0.1],
            triggerEvent: true,
            axisLabel: {
              formatter: function(value) {//姓名超過3個字加省略號
                var res = value;
                if (res.length > 3) {
                  res = res.substring(0, 3) + "..";
                }
                return res;
              }
            },
            data: _this.bar.name,
            // data: ['王一王一', '張二', '吳三', '陳四', '張二', '吳三', '陳四', '王一', '張二', '吳三', '陳四']
          },
          series: [{
            name: '金額',//注意與lengend名稱必須一致，否則不顯示圖例
            itemStyle: {//柱圖背景色
              color: 'lightcoral'
            },
            type: 'bar',
            barWidth: 10, //柱圖寬度
            data: _this.bar.data,
            // data: [7, 12, 8, 3, 7, 1000, 8, 3, 7, 8, 3]
          }],
        });
        _this.barHeight = list.length * 50 + 100;
        obj.style.height = _this.barHeight + "px";
　　　　　//******
        // chart_bar.getDom().style.height = _this.barHeight + "px";
        // chart_bar.getDom().childNodes[0].style.height = _this.barHeight + "px";
        // chart_bar.getDom().childNodes[0].childNodes[0].setAttribute("height", _this.barHeight);
        // chart_bar.getDom().childNodes[0].childNodes[0].style.height = _this.barHeight + "px";
　　　　　//******
　　　　　//我用*****部分設置高度有問題：一進頁面是好的，但是tab一旦切換柱狀圖就會變形
        chart_bar.resize();//區域更新
      }
    }
  }
</script>