能力统计
This commit is contained in:
parent
154c2d2403
commit
2ad5476edb
|
|
@ -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>
|
||||
<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>
|
||||
|
|
@ -16,13 +16,35 @@
|
|||
<div id="main3" style="width: 400px;height:200px;"></div>
|
||||
</div>
|
||||
<div class='container-body4'>
|
||||
<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'>
|
||||
<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'>
|
||||
<div class='footer-left' ></div>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue