IDCDatasync-vue/src/views/data/statistics.vue

<template>
    <div style="margin-top: 10px; margin-left: 10px;">
        <a-row :gutter="20">
            <a-col :md="12" :sm="1" style="height:calc(50vh - 125px);">
                <div class="linese"></div>
                <div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div>
                <div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 70px);"></div>
                <div class="linese"></div>
            </a-col>
            <a-col :md="12" :sm="2" style="height:calc(50vh - 125px);">
                <div class="linese"></div>
                <div class="echartsTitle"><div class="ecicon"></div>数据编目总量统计</div>
                <div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"  style="width: 100%; height: calc(100% - 70px); "></div>
                <div class="linese"></div>
            </a-col>
            <a-col :md="12" :sm="3" style="height:calc(50vh - 125px);">
                <div class="linese"></div>
                <div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div>
                <div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 100%; height: calc(100% - 70px);"></div>
                <div class="linese"></div>
            </a-col>
            <a-col :md="12" :sm="4" style="height:calc(50vh - 125px);">
                <div class="linese"></div>
                <div class="echartsTitle"><div class="ecicon"></div>数据编目存储占比统计</div>
                <div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 100%; height: calc(100% - 70px);"></div>
                <div class="linese"></div>
            </a-col>
        </a-row>
    </div>
  </template>
  
  <script>
   import { getAction } from '@/api/manage'
   import JEllipsis from "@/components/jeecg/JEllipsis";
    export default {
      name: "statistics",
      components: {
        JEllipsis
      },
      data () {
        return {
          description: '数据统计',
        }
      },
      mounted() { 
            this.getTables()
      },
      computed: {
      },
      destroyed: function () { 
      },
      created () {
  
      },
      methods: {
        dataAdd(){
        },
        getselect(){

        },
        getTables(){
            this.getcleaningVariance();
            this.gettotalNumberCatalogues();
            this.getcatalogingStorage();
            this.gettypeStorage();
        },
        getcleaningVariance(){
          var myChart = this.$echarts.init(this.$refs.cleaningVariance);
          var option = {
                tooltip: {},
                grid:{
                    left:'40px',
                    right:'20px',
                    top:'20px',
                    bottom:'20px'
                },
                xAxis: { 
                    type: 'category' ,
                    
                    axisLabel:{
                        color: '#fff'
                    },
                    splitLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                },
                yAxis: {
                    
                    axisLabel:{
                        color: '#fff'
                    },
                    splitLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                },
                dataset: {
                    source: [
                        ['product', '原始库', '标准库'],
                        ['平台', 43.3, 85.8],
                        ['编队', 83.1, 73.4],
                        ['航空兵', 86.4, 65.2],
                        ['陆战队', 72.4, 53.9],
                        ['作战', 72.4, 53.9],
                        ['反潜', 72.4, 53.9],
                        ['舰炮', 72.4, 53.9]
                    ]
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar',barMaxWidth: 20,  }, { type: 'bar',barMaxWidth: 20,  }],
                color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            };
           myChart.setOption(option);
        },
        gettotalNumberCatalogues(){
          var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
          var option = {
                tooltip: {},
                dataset: {
                    source: [
                        ['product', ''],
                        ['侦察预警', 43.3],
                        ['指挥控制', 83.1],
                        ['火力打击', 86.4],
                        ['支援保障', 72.4],
                        ['装备运行状态', 72.4],
                        ['作战环境', 72.4]
                    ]
                },
                grid:{
                    left:'40px',
                    right:'20px',
                    top:'20px',
                    bottom:'20px'
                },
                xAxis: { 
                    type: 'category' ,
                    
                    axisLabel:{
                        color: '#fff'
                    },
                    splitLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                },
                yAxis: {
                    
                    axisLabel:{
                        color: '#fff'
                    },
                    splitLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar',barMaxWidth: 30,  }],
                color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            };
           myChart.setOption(option);
        },
        getcatalogingStorage(){
          var myChart = this.$echarts.init(this.$refs.catalogingStorage);
          var option = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                name: '占比',
                type: 'pie',
                radius: '80%',
                data: [
                    { value: 1048, name: '平台' },
                    { value: 735, name: '编队' },
                    { value: 580, name: '航空兵' },
                    { value: 484, name: '陆战队' },
                    { value: 300, name: '作战' },
                    { value: 735, name: '反潜' },
                    { value: 580, name: '舰炮' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ],
            color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            };
            myChart.setOption(option);
        },
        gettypeStorage(){
          var myChart = this.$echarts.init(this.$refs.typeStorage);
          var option = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                name: '占比',
                type: 'pie',
                radius: '80%',
                data: [
                    { value: 1048, name: '侦察预警' },
                    { value: 735, name: '指挥控制' },
                    { value: 580, name: '火力打击' },
                    { value: 484, name: '支援保障' },
                    { value: 300, name: '装备运行状态' },
                    { value: 300, name: '作战环境' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ],
            color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            };
            myChart.setOption(option);
        },
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less';
  </style>