src/components/VIncome.vue

<template>
    <div class="theme-wrap">
        <card-title> <span>收入消息</span></card-title>
        <div class="theme-body">
            <account-num>
                <span>总计</span>
            </account-num>
            <div class="income-echart" id="income-echart">
                <bar-chart :chart-data="pieChartData"></bar-chart>
            </div>
        </div>
    </div>
</template>
<script>
import CardTitle from './base/CardTitle'
import AccountNum from './base/AccountNum'
import barChart from './base/barChart'
export default {
  name: 'VIncome',
  components: {
    CardTitle,
    AccountNum,
    barChart
  },
  data() {
    return {
      pieChartData: {
        yData: [1,1],
        legendData: ['空余','占有']
      },
    }
  },
  mounted(){
    //this.drawBar();
  },
  methods: {
    drawBar() {
      let myChart = echarts.init(document.getElementById('income-echart'));
      let option = {
        color: ['#f44'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          }
        },
        xAxis : [
          {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            name:'每月花费',
            type:'bar',
            barWidth: '60%',
            data:[995,666,444,858,654,236,645,546,846,225,547,356]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
}
</script>
<style scoped lang="scss">
    .theme-wrap {
        height: 100%;
    }
    .theme-body {
        height: calc(100% - 30px);
        margin-left: 20px;
    }
    .income-echart{
        height: 70%;
    }
</style>