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="{ 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>