X-web/src/views/modules/cus/contract-statistics-annual-report.vue

<template>
  <div>
    <div class="my-title">年度合同统计</div>
    <div style="margin-left: 20px;margin-right: 20px">
      <!-- todo -->
      <div id="myChart" :style="{width: '600px', height: '300px'}"></div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">返回</el-button>
    </span>
  </div>
</template>

<script>
  // import echarts from 'echarts'
  import EDesc from '../common/e-desc'
  import EDescItem from '../common/e-desc-item'
  export default {
    name: 'contract-statistics-annual-report',
    components: {
      EDesc, EDescItem
    },
    data () {
      return {
        id: 0,
        dataForm: {}
      }
    },
    methods: {
      onChose () {
        this.$emit('onChose')
      },
      async init (id) {
        this.id = id || 0
        this.dataForm = {
          year: 2020
        }
        // this.drawLine()
        this.getDetails()
      },
      drawLine () {
        // // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
        // let myChart = this.$echarts.init(document.getElementById('myChart'))
        // // 绘制图表
        // myChart.setOption({
        //   title: { text: '太阳系八大行星的卫星数量' },
        //   tooltip: {},
        //   xAxis: {
        //     data: ['水星', '金星', '地球', '火星', '木星', '土星', '金王星', '海王星']
        //   },
        //   yAxis: {},
        //   series: [{
        //     name: '数量',
        //     type: 'bar',
        //     data: [0, 0, 1, 2, 79, 82, 27, 14]
        //   }]
        // })
      },
      getDetails () {
        this.$http({
          url: this.$http.adornUrl(`/biz-service/cusContractCensus/year/info`),
          method: 'get',
          params: this.$http.adornParams({
            'year': this.dataForm.year
          })
        }).then(({data}) => {
          if (data && data.code === '200') {
            this.dataForm = data.data
          }
        })
      }
    }
  }
</script>

<style scoped>
.my-line{
  border-bottom: 1px solid #c0c4cc;
  margin-bottom: 10px;
}
.title{
  padding: 10px 0 ;
}
</style>