npm install echarts -s

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