From 2ad5476edb80fc37a92e435a6c08cf8c947cc51c Mon Sep 17 00:00:00 2001
From: gaoxiaolong <327091900@qq.com>
Date: Fri, 24 Jun 2022 16:31:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicationResources.vue                  | 728 +++++++++++++++++-
 .../abilityStatistics/componentServices.vue   | 107 ++-
 2 files changed, 800 insertions(+), 35 deletions(-)

diff --git a/back/src/views/modules/abilityStatistics/applicationResources.vue b/back/src/views/modules/abilityStatistics/applicationResources.vue
index a44f8bb8..49826e38 100644
--- a/back/src/views/modules/abilityStatistics/applicationResources.vue
+++ b/back/src/views/modules/abilityStatistics/applicationResources.vue
@@ -4,31 +4,697 @@
         <span class='page-introduction'>发布情况统计</span>
         <div class='container-body'>
             <div class='container-body1'>
-                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+                <span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
+                 <div id="main1" style="width: 400px;height:230px;"></div>
             </div>
             <div class='container-body2'>
-                <span style='font-size:18px;color;#000000;'>发布量情况分布</span>
+                <span style='font-size:18px;color;#000000;'>应用贡献组件数量分布</span>
+                <div id="main2" style="width: 400px;height:200px;"></div>
             </div>
             <div class='container-body3'>
-                <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
+                <span style='font-size:18px;color;#000000;'>贡献组件被应用使用数量分布</span>
+                 <div id="main3" style="width: 400px;height:230px;"></div>
             </div>
              <div class='container-body4'>
-                <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
-                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                <span style='font-size:18px;color;#000000;'>应用贡献组件数量分布</span>
+                 <div id="main4" style="width: 650px;height:230px;"></div>
             </div>
              <div class='container-body5'>
-                <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
-                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                 <div style='margin-bottom:30px'>
+                     <span style='font-size:18px;color;#000000;'>应用贡献组件被调用</span>
+                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                </div>
+                <div v-for="(item,index) in usedList" :key='index' >
+                    <div style='display:flex'>
+                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
+                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
+                        </div>
+                        <span class='num-style'>{{item.name}}</span>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
+                    </div>
+                </div>
             </div>
              <div class='container-body6'>
-                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+                <span style='font-size:18px;color;#000000;'>评分分布情况</span>
+                <div id="main6" style="width: 400px;height:200px;"></div>
             </div>
              <div class='container-body7'>
-                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+                <span style='font-size:18px;color;#000000;'>发布端应用分布情况</span>
+                <div id="main7" style="width: 300px;height:200px;"></div>
+            </div>
+             <div class='container-body8'>
+                <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
+                <div id="main8" style="width: 300px;height:200px;"></div>
+            </div>
+             <div class='container-body9'>
+                <span style='font-size:18px;color;#000000;'>应用状态分布情况</span>
+                <div id="main9" style="width: 250px;height:200px;"></div>
             </div>
         </div>
     </div>
 </template>
+<script>
+import * as echarts from 'echarts';
+
+export default {
+    data(){
+        return{
+            colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
+            widthList:['90px','80px','70px','60px','50px'],
+            numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
+            usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
+
+        }
+    },
+     mounted(){
+        this.myEcharts1()
+        this.myEcharts2()
+        this.myEcharts3()
+        this.myEcharts4()
+        this.myEcharts6()
+        this.myEcharts7()
+        this.myEcharts8()
+        this.myEcharts9()
+  },
+  methods:{
+    myEcharts1(){
+        var chartDom = document.getElementById('main1');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+            grid: {		       
+		        bottom: '23%',
+		    },
+        xAxis: {
+            type: 'category',
+            data: ['算法', '图层', '开发', '业务'],
+            color:['#f5f5f5'],
+            axisTick:{
+              show:false,//不显示坐标轴刻度线
+            },
+            splitLine: {
+              show: true,
+              color:['#f5f5f5']
+            },
+            axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        yAxis: {
+            name:'次数',
+            splitLine: {
+              show: false
+            },
+            type: 'value',
+            interval:20,  //控制y轴的刻度
+            type: 'value',
+            axisTick:{ //控制y轴的刻度
+                show:false
+            },
+             nameTextStyle:{
+                color:"#999999"
+            },
+             axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        series: [
+            {
+           data: [60, 90, 50, 80],
+            type: 'bar',
+            barWidth: 14,
+           
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0.8)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
+                ])
+            },
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts2(){
+        var chartDom = document.getElementById('main2');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '22%',
+            left: '50%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}         ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            padding:[0,8,0,18]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center:['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '算法' },
+                { value: 735, name: '图层' },
+                { value: 580, name: '开发' },
+                { value: 484, name: '业务' },
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts3(){
+        var chartDom = document.getElementById('main3');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+            grid: {		       
+		        bottom: '23%',
+		    },
+        xAxis: {
+            type: 'category',
+            data: ['算法', '图层', '开发', '业务'],
+            color:['#f5f5f5'],
+            axisTick:{
+              show:false,//不显示坐标轴刻度线
+            },
+            splitLine: {
+              show: true,
+              color:['#f5f5f5']
+            },
+            axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//x轴文字的配置
+                textStyle: {
+                     color: "#999999",//x轴内容文字颜色
+                },
+        },
+        },
+        yAxis: {
+            name:'应用数',
+             nameTextStyle:{
+                color:"#999999"
+            },
+            splitLine: {
+              show: false
+            },
+            type: 'value',
+            interval:20,  //控制y轴的刻度
+            type: 'value',
+            axisTick:{ //控制y轴的刻度
+                show:false
+            },
+             axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        series: [
+            {
+           data: [60, 90, 50, 80],
+            type: 'bar',
+            barWidth: 14,
+           
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0.8)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
+                ])
+            },
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts4(){
+        var chartDom = document.getElementById('main4');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+            grid: {		
+                right:'15%',       
+		        bottom: '23%',
+		    },
+        xAxis: {
+            type: 'category',
+            data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
+            color:['#f5f5f5'],
+            axisTick:{
+              show:false,//不显示坐标轴刻度线
+            },
+            splitLine: {
+              show: true,
+              color:['#f5f5f5']
+            },
+            axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        yAxis: {
+            name:'数量',
+             nameTextStyle:{
+                color:"#999999"
+            },
+            splitLine: {
+              show: false
+            },
+            type: 'value',
+            interval:20,  //控制y轴的刻度
+            type: 'value',
+            axisTick:{ //控制y轴的刻度
+                show:false
+            },
+             axisLine:{
+                lineStyle:{
+                    color:"#ebebeb"
+                }
+            },
+            axisLabel: {//y轴文字的配置
+                textStyle: {
+                     color: "#999999",//Y轴内容文字颜色
+                },
+        },
+        },
+        series: [
+            {
+           data: [60, 90, 50, 80, 50, 80],
+            type: 'bar',
+            barWidth: 14,
+           
+            itemStyle: {
+                barBorderRadius: [20,20,20,20],
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(178, 189, 255,0.8)' },
+                // { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
+                ])
+            },
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts6(){
+        var chartDom = document.getElementById('main6');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '14%',
+            left: '55%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}            ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            padding:[0,8,0,18]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center:['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '1分' },
+                { value: 735, name: '2分' },
+                { value: 580, name: '3分' },
+                { value: 484, name: '4分' },
+                { value: 300, name: '5分' }
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts7(){
+        var chartDom = document.getElementById('main7');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '14%',
+            left: '40%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}  ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            fontSize:12,
+            padding:[0,0,0,10]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            type: 'pie',
+            radius: ['30%', '45%'],
+            center:['19%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '应用名称1' },
+                { value: 735, name: '应用名称2' },
+                { value: 580, name: '应用名称3' },
+                { value: 484, name: '应用名称4' },
+                { value: 300, name: '应用名称5' }
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts8(){
+        var chartDom = document.getElementById('main8');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '14%',
+            left: '40%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}  ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            fontSize:12,
+            padding:[0,8,0,10]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            type: 'pie',
+            radius: ['30%', '45%'],
+            center:['19%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '应用领域1' },
+                { value: 735, name: '应用领域2' },
+                { value: 580, name: '应用领域3' },
+                { value: 484, name: '应用领域4' },
+                { value: 300, name: '应用领域5' }
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    myEcharts9(){
+        var chartDom = document.getElementById('main9');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: '',
+            top: '14%',
+            left: '47%',
+            width:"auto",
+            height:"auto",
+            orient: "vertical",
+            itemGap: 15,
+            itemWidth: 14,
+            // 使用回调函数
+           formatter: function(name) {
+            var data = option.series[0].data;
+            var total = 0;
+            var tarValue;
+            for (var i = 0; i < data.length; i++) {
+              total += data[i].value;
+              if (data[i].name == name) {
+                tarValue = data[i].value;
+              }
+            }
+            var v = tarValue;
+            var p = Math.round(((tarValue / total) * 100));
+            return `${name}  ${p}%`;
+          },
+          itemStyle:{},
+          textStyle: {
+            color: "#666666",
+            fontSize:12,
+            padding:[0,8,0,10]
+          },
+        },
+        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+        series: [
+            {
+            type: 'pie',
+            radius: ['30%', '45%'],
+            center:['22%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+            },
+            label: {
+                show: false,
+                position: 'center'
+            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '应用状态1' },
+                { value: 735, name: '应用状态2' },
+                { value: 580, name: '应用状态3' },
+                { value: 484, name: '应用状态4' },
+                { value: 300, name: '应用状态5' }
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    }
+}
+</script>
+
 <style scoped>
 .container{
     padding-top: 15px;
@@ -100,11 +766,53 @@
         margin-top: 20px;
     }
      .container-body7{
-        width:860px;
+        width:287px;
         height:250px;
         background-color: #ffffff;
         padding-top:20px;
         padding-left: 20px;
         margin-top: 20px;
     }
+    .container-body8{
+        width:287px;
+        height:250px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+    }
+    .container-body9{
+        width:286px;
+        height:250px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+    }
+    .ranking-img{
+        width:60px;
+        height:26px;
+        display: flex;
+        line-height: 26px;
+        margin-bottom:15px;
+        margin-right:10px;
+        padding-left: 15px;
+    }
+     .num-style{
+         position:absolute;
+         display: flex;
+         margin-left:90px;
+         margin-top:5px;
+         color:#333333;
+         font-size: 16px;        
+    }   
+    .count-style{
+         position:absolute;
+         display: flex;
+         margin-left:400px;
+         margin-top:5px;
+         color:#333333;
+         font-size: 18px;  
+         font-weight: bold;      
+    }
 </style>
\ No newline at end of file
diff --git a/back/src/views/modules/abilityStatistics/componentServices.vue b/back/src/views/modules/abilityStatistics/componentServices.vue
index 2ab65dfb..40117e32 100644
--- a/back/src/views/modules/abilityStatistics/componentServices.vue
+++ b/back/src/views/modules/abilityStatistics/componentServices.vue
@@ -16,12 +16,34 @@
                 <div id="main3" style="width: 400px;height:200px;"></div>
             </div>
              <div class='container-body4'>
-                <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
-                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                <div style='margin-bottom:30px'>
+                     <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
+                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                </div>
+                <div v-for="(item,index) in usedList" :key='index' >
+                    <div style='display:flex'>
+                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
+                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
+                        </div>
+                        <span class='num-style'>{{item.name}}</span>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
+                    </div>
+                </div>
             </div>
              <div class='container-body5'>
-                <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
-                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                <div style='margin-bottom:30px'>
+                     <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
+                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+                </div>
+                <div v-for="(item,index) in applicationList" :key='index' >
+                    <div style='display:flex'>
+                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
+                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
+                        </div>
+                        <span class='num-style'>{{item.name}}</span>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span>
+                    </div>
+                </div>
             </div>
         </div>
         <div class='footer'>
@@ -35,6 +57,15 @@
 import * as echarts from 'echarts';
 
 export default {
+    data(){
+        return{
+            colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
+            widthList:['90px','80px','70px','60px','50px'],
+            numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
+            usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
+            applicationList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},]
+        }
+    },
     mounted(){
         this.myEcharts1()
         this.myEcharts2()
@@ -95,13 +126,13 @@ export default {
                 show: false,
                 position: 'center'
             },
-            emphasis: {
-                label: {
-                show: true,
-                fontSize: '40',
-                fontWeight: 'bold'
-                }
-            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
             labelLine: {
                 show: false
             },
@@ -173,13 +204,13 @@ export default {
                 show: false,
                 position: 'center'
             },
-            emphasis: {
-                label: {
-                show: true,
-                fontSize: '40',
-                fontWeight: 'bold'
-                }
-            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
             labelLine: {
                 show: false
             },
@@ -250,13 +281,13 @@ export default {
                 show: false,
                 position: 'center'
             },
-            emphasis: {
-                label: {
-                show: true,
-                fontSize: '40',
-                fontWeight: 'bold'
-                }
-            },
+            // emphasis: {
+            //     label: {
+            //     show: true,
+            //     fontSize: '40',
+            //     fontWeight: 'bold'
+            //     }
+            // },
             labelLine: {
                 show: false
             },
@@ -355,4 +386,30 @@ export default {
         margin-left:10px;
         margin-top:8px
     }
+    .ranking-img{
+        width:60px;
+        height:26px;
+        display: flex;
+        line-height: 26px;
+        margin-bottom:15px;
+        margin-right:10px;
+        padding-left: 15px;
+    }
+    .num-style{
+         position:absolute;
+         display: flex;
+         margin-left:90px;
+         margin-top:5px;
+         color:#333333;
+         font-size: 16px;        
+    }   
+    .count-style{
+         position:absolute;
+         display: flex;
+         margin-left:400px;
+         margin-top:5px;
+         color:#333333;
+         font-size: 18px;  
+         font-weight: bold;      
+    }
 </style>
\ No newline at end of file