|
|
|
@ -5,7 +5,7 @@ |
|
|
|
--> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="wrap-container sn-container"> |
|
|
|
<!-- <div class="wrap-container sn-container"> |
|
|
|
<div class="sn-content"> |
|
|
|
<div class="sn-title">环形饼图</div> |
|
|
|
<div class="sn-body"> |
|
|
|
@ -23,6 +23,9 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="income-container"> |
|
|
|
<div class="chart" id="chart_rp"></div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -32,7 +35,7 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
option: null |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -42,10 +45,30 @@ export default { |
|
|
|
getEchart() { |
|
|
|
let myChart = echarts.init(document.getElementById('chart_rp')); |
|
|
|
this.option = { |
|
|
|
title: { |
|
|
|
text: '50%', |
|
|
|
// 副标题 |
|
|
|
subtext: "车位已使用", |
|
|
|
// 主副标题间距 |
|
|
|
itemGap: 10, |
|
|
|
x: 'center', |
|
|
|
y: '80', |
|
|
|
// 主标题样式 |
|
|
|
textStyle: { |
|
|
|
fontSize: '26', |
|
|
|
color: '#fff' |
|
|
|
}, |
|
|
|
// 副标题样式 |
|
|
|
subtextStyle: { |
|
|
|
fontSize: '14', |
|
|
|
fontWeight: '100', |
|
|
|
color: '#8A9AC5' |
|
|
|
} |
|
|
|
}, |
|
|
|
series: [{ |
|
|
|
name: '环形饼图', |
|
|
|
type: 'pie', |
|
|
|
radius: ['68%', '80%'], |
|
|
|
radius: ['48%', '70%'], |
|
|
|
hoverAnimation: false, |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { |
|
|
|
@ -54,35 +77,47 @@ export default { |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
fontSize: '30', |
|
|
|
fontWeight: 'bold' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
data: [{ |
|
|
|
value: 6, |
|
|
|
value: 6, |
|
|
|
name: '区块链', |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
offset: 0, |
|
|
|
color: '#6984fe' |
|
|
|
},{ |
|
|
|
offset: 1, |
|
|
|
color: '#24d1fd' |
|
|
|
}]) |
|
|
|
} |
|
|
|
offset: .2, |
|
|
|
color: '#47BDFF' |
|
|
|
}, { |
|
|
|
offset: .5, |
|
|
|
color: '#34AEFF' |
|
|
|
}, { |
|
|
|
offset: 1, |
|
|
|
color: '#0589FF' |
|
|
|
} |
|
|
|
]), |
|
|
|
// borderRadius:800, |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
},{ |
|
|
|
value: 4, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 4, |
|
|
|
name: '大数据', |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#eee' |
|
|
|
color: '#3B4257', |
|
|
|
} |
|
|
|
} |
|
|
|
}] |
|
|
|
} |
|
|
|
] |
|
|
|
}] |
|
|
|
} |
|
|
|
|
|
|
|
@ -94,7 +129,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
@ -105,25 +140,28 @@ export default { |
|
|
|
top: 1978px; |
|
|
|
width: 432px; |
|
|
|
height: 400px; |
|
|
|
|
|
|
|
.wrap-container { |
|
|
|
left: 125px; |
|
|
|
top: 94px; |
|
|
|
width: 150px; |
|
|
|
height: 150px; |
|
|
|
} |
|
|
|
|
|
|
|
.chartsdom { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.back-chart{ |
|
|
|
.back-chart { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
background:url(../../assets/img/back_chart.png) no-repeat center; |
|
|
|
background: url(../../assets/img/back_chart.png) no-repeat center; |
|
|
|
} |
|
|
|
|
|
|
|
.arrow-cir { |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
@ -132,12 +170,14 @@ export default { |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
opacity: 0; |
|
|
|
|
|
|
|
&.arrow-cir1 { |
|
|
|
background: url(../../assets/img/icon_04.png) no-repeat 50% 50%; |
|
|
|
-webkit-animation: arrow-cir1 5s linear infinite; |
|
|
|
animation: arrow-cir1 5s linear infinite; |
|
|
|
offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z"); |
|
|
|
} |
|
|
|
|
|
|
|
&.arrow-cir2 { |
|
|
|
background: url(../../assets/img/icon_05.png) no-repeat 50% 50%; |
|
|
|
-webkit-animation: arrow-cir2 5s linear infinite; |
|
|
|
@ -145,7 +185,7 @@ export default { |
|
|
|
offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
@-webkit-keyframes arrow-cir1 { |
|
|
|
@ -153,16 +193,19 @@ export default { |
|
|
|
offset-distance: 40%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
offset-distance: 140%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes arrow-cir1 { |
|
|
|
0% { |
|
|
|
offset-distance: 40%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
offset-distance: 140%; |
|
|
|
opacity: 1; |
|
|
|
@ -174,19 +217,29 @@ export default { |
|
|
|
offset-distance: 0%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
offset-distance: 100%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes arrow-cir2 { |
|
|
|
0% { |
|
|
|
offset-distance: 0%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
offset-distance: 100%; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.income-container { |
|
|
|
.chart { |
|
|
|
width: 3rem; |
|
|
|
height: 3rem; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
