<template>
  <div class="view-statisticalAnalysisFundsStatistics">
    <el-row>
      <el-col :span="24" style="margin-bottom: 15px">
        <Card title="近五年经费支出" tip="每年费用统计">
          <template slot="content">
            <div class="baseBar-box" ref="echartElLine"></div>
          </template>
        </Card>
      </el-col>
      <el-col :span="12">
        <Card title="航材费用" tip="统计费用较多的航材">
          <template slot="content">
            <div class="baseBar-box" ref="echartElBar"></div>
          </template>
        </Card>
      </el-col>
      <el-col :span="12">
        <Card title="费用构成比例" tip="按航材分类统计费用的构成比例"
          ><template slot="content"> <div class="baseBar-box" ref="echartElBarOther"></div> </template
        ></Card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { barOptions, lineOptions, setPieOptions } from './index'
export default {
  name: 'statisticalAnalysisFundsStatistics',
  components: {},
  data() {
    // 这里存放数据
    return {
      barOptions,
      lineOptions,
      setPieOptions
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const echartLine = echarts.init(this.$refs.echartElLine)
      const echart = echarts.init(this.$refs.echartElBar)
      const echartElBarOther = echarts.init(this.$refs.echartElBarOther)

      echartLine.setOption(this.lineOptions)
      echart.setOption(this.barOptions)
      echartElBarOther.setOption(this.setPieOptions)
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
