sstt-archives-web/src/views/dashboard/index.vue

<template>
  <div style="padding:20px 0">

    <el-row :gutter="20" class='elrows'>
      <el-col :span="24">
        <PanelGroup :totaldata="list"></PanelGroup>
      </el-col>

      <el-col :span="12" class="chartSize">
        <div style="padding:10px;color:#b3241d;font-size:18px">月度上传档案统计</div>
        <myecharts :width="'100%'" :height="'300px'" :data="overall_month_data"></myecharts>
      </el-col>
      <el-col :span="12" class="chartSize">
        <div style="padding:10px;color:#b3241d;font-size:18px">组织档案统计</div>
        <myecharts :width="'100%'" :height="'300px'" :data="overall_originze_data"></myecharts>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import myecharts from '@/components/myecharts';
  import PanelGroup from './components/PanelGroup';
  export default {
    components: {
      myecharts,
      PanelGroup
    },
    data() {
      return {
        list: {},
        overall_month_data: {},
        overall_originze_data: {}
      }
    },
    watch: {

    },
    created() {
      this.init()
    },
    mounted() {

    },
    methods: {

      init() {
        this.overall_month_data = {
          xShow: true,
          yShow: true,
          rotate: 0,
          // formatter:function(params){
          //   return that.chartFomatter(params)
          // },
          x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          list: [{
            name: "上传数",
            data: [3, 10, 12, 4, 20, 13, 1, 21, 8, 2, 1, 14],
            type: 'bar',
            barGap: '0%',
          }]
        }
        this.overall_originze_data = {
          trigger: 'item',
          xShow: false,
          yShow: false,
          list: [{
            name: '上传数',
            type: 'pie',
            radius: '80%',
            // center:['20%','20%'],
            data: [{
                value: 30,
                name: '集团'
              },
              {
                value: 22,
                name: '子公司'
              }
            ],
            label: {
              show: false,
              position: 'center'
            },
          }]
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .elrows {
    // margin: 0 !important;

    .el-col {
      padding: 10px !important
    }

    .chartSize {
      width: calc(50% - 20px)!important;
      margin: 10px!important;
      background: #fff;
    }
  }
</style>