能力统计
This commit is contained in:
parent
154c2d2403
commit
2ad5476edb
|
|
@ -4,31 +4,697 @@
|
||||||
<span class='page-introduction'>发布情况统计</span>
|
<span class='page-introduction'>发布情况统计</span>
|
||||||
<div class='container-body'>
|
<div class='container-body'>
|
||||||
<div class='container-body1'>
|
<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>
|
||||||
<div class='container-body2'>
|
<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>
|
||||||
<div class='container-body3'>
|
<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>
|
||||||
<div class='container-body4'>
|
<div class='container-body4'>
|
||||||
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
|
<span style='font-size:18px;color;#000000;'>应用贡献组件数量分布</span>
|
||||||
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
<div id="main4" style="width: 650px;height:230px;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class='container-body5'>
|
<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'>
|
<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>
|
||||||
<div class='container-body6'>
|
<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>
|
||||||
<div class='container-body7'>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<style scoped>
|
||||||
.container{
|
.container{
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
|
|
@ -100,11 +766,53 @@
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.container-body7{
|
.container-body7{
|
||||||
width:860px;
|
width:287px;
|
||||||
height:250px;
|
height:250px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding-top:20px;
|
padding-top:20px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-top: 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>
|
</style>
|
||||||
|
|
@ -16,13 +16,35 @@
|
||||||
<div id="main3" style="width: 400px;height:200px;"></div>
|
<div id="main3" style="width: 400px;height:200px;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class='container-body4'>
|
<div class='container-body4'>
|
||||||
|
<div style='margin-bottom:30px'>
|
||||||
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
|
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
|
||||||
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
<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>
|
||||||
<div class='container-body5'>
|
<div class='container-body5'>
|
||||||
|
<div style='margin-bottom:30px'>
|
||||||
<span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
|
<span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
|
||||||
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||||
</div>
|
</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>
|
||||||
<div class='footer'>
|
<div class='footer'>
|
||||||
<div class='footer-left' ></div>
|
<div class='footer-left' ></div>
|
||||||
|
|
@ -35,6 +57,15 @@
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
export default {
|
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(){
|
mounted(){
|
||||||
this.myEcharts1()
|
this.myEcharts1()
|
||||||
this.myEcharts2()
|
this.myEcharts2()
|
||||||
|
|
@ -95,13 +126,13 @@ export default {
|
||||||
show: false,
|
show: false,
|
||||||
position: 'center'
|
position: 'center'
|
||||||
},
|
},
|
||||||
emphasis: {
|
// emphasis: {
|
||||||
label: {
|
// label: {
|
||||||
show: true,
|
// show: true,
|
||||||
fontSize: '40',
|
// fontSize: '40',
|
||||||
fontWeight: 'bold'
|
// fontWeight: 'bold'
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
|
|
@ -173,13 +204,13 @@ export default {
|
||||||
show: false,
|
show: false,
|
||||||
position: 'center'
|
position: 'center'
|
||||||
},
|
},
|
||||||
emphasis: {
|
// emphasis: {
|
||||||
label: {
|
// label: {
|
||||||
show: true,
|
// show: true,
|
||||||
fontSize: '40',
|
// fontSize: '40',
|
||||||
fontWeight: 'bold'
|
// fontWeight: 'bold'
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
|
|
@ -250,13 +281,13 @@ export default {
|
||||||
show: false,
|
show: false,
|
||||||
position: 'center'
|
position: 'center'
|
||||||
},
|
},
|
||||||
emphasis: {
|
// emphasis: {
|
||||||
label: {
|
// label: {
|
||||||
show: true,
|
// show: true,
|
||||||
fontSize: '40',
|
// fontSize: '40',
|
||||||
fontWeight: 'bold'
|
// fontWeight: 'bold'
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
|
|
@ -355,4 +386,30 @@ export default {
|
||||||
margin-left:10px;
|
margin-left:10px;
|
||||||
margin-top:8px
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue