287 lines
6.9 KiB
Vue
287 lines
6.9 KiB
Vue
<template>
|
|
<div class="traffic-box-1">
|
|
<div class="title-num">
|
|
<div class="item-box">
|
|
<div class="item-t flex">
|
|
<img src="@/assets/images/t-icon-1.png" alt="">总路段
|
|
</div>
|
|
<div class="item-num"><span><countup endVal="88895" /></span> </div>
|
|
</div>
|
|
<div class="item-box">
|
|
<div class="item-t flex">
|
|
<img src="@/assets/images/t-icon-1.png" alt="">总路段
|
|
</div>
|
|
<div class="item-num"><span><countup endVal="88895" /></span></div>
|
|
</div>
|
|
<div class="item-box">
|
|
<div class="item-t flex">
|
|
<img src="@/assets/images/t-icon-1.png" alt="">总路段
|
|
</div>
|
|
<div class="item-num"><span><countup endVal="88895" /></span></div>
|
|
</div>
|
|
<div class="item-box">
|
|
<div class="item-t flex">
|
|
<img src="@/assets/images/t-icon-1.png" alt="">总路段
|
|
</div>
|
|
<div class="item-num"><span><countup endVal="88895" /></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="item-li" v-for="item in 4">
|
|
<div class="title-3"><span>拥堵频次占比</span></div>
|
|
<div class="chart-box">
|
|
<v-chart class="chart" :option="option1" autoresize />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import countup from 'vue-countup-v3'
|
|
import * as echarts from 'echarts'
|
|
import { fitChartSize } from '@/utils/dataUtil'
|
|
import Map from '@/components/Map/marker.vue'
|
|
import VChart, { THEME_KEY } from 'vue-echarts';
|
|
import { ref, provide } from 'vue';
|
|
|
|
provide(THEME_KEY, 'dark');
|
|
const option1 = ref({
|
|
backgroundColor:'transparent',
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
right: fitChartSize(10),
|
|
top: fitChartSize(70),
|
|
bottom: fitChartSize(20),
|
|
itemWidth:5,
|
|
itemHeight:5,
|
|
padding: [20,10,20,10],
|
|
// itemGap:15,
|
|
show:true,
|
|
lineStyle:{
|
|
borderColor:'#fff',
|
|
width:5,
|
|
},
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize:fitChartSize(16),
|
|
lineHeight: 16,
|
|
rich: {
|
|
d: {
|
|
width: '100%',
|
|
borderWidth: 0.5,
|
|
height:5,
|
|
backgroundColor: '1',
|
|
},
|
|
a: {
|
|
width: fitChartSize(75),
|
|
align: 'left',
|
|
fontSize:fitChartSize(16),
|
|
// backgroundColor:'1'
|
|
// color:'1',
|
|
// borderColor:'#eee',
|
|
// borderWidth:2
|
|
},
|
|
}
|
|
},
|
|
formatter: (e) => {
|
|
let ratio = 0
|
|
let value = 0
|
|
if (option1.value.series[0].data.length > 0) {
|
|
option1.value.series[0].data.forEach(item => {
|
|
if (e == item.name) {
|
|
ratio = (item.value*100/3799).toFixed(0)
|
|
value = item.value
|
|
}
|
|
});
|
|
}
|
|
// return `${e} ${ratio}%
|
|
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
|
|
return arr.join('')
|
|
},
|
|
itemStyle:{
|
|
// color:'#fff'
|
|
|
|
},
|
|
backgroundColor:'rgba(0,77,136,0.6)'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
left:fitChartSize(-50),
|
|
top:fitChartSize(40),
|
|
width:fitChartSize(350),
|
|
height:fitChartSize(350),
|
|
// width:200,
|
|
// height:200,
|
|
radius: ['40%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 5,
|
|
itemStyle: {
|
|
borderRadius: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center',
|
|
fontWeight: 'bold',
|
|
// formatter: function (o) {
|
|
// let data = o.data.value
|
|
// return `{value|${data}}` + '\n' + `{name|整改率}`
|
|
// },
|
|
// rich: {
|
|
|
|
// value: {
|
|
// color: '#fff',
|
|
// fontSize: fitChartSize(24),
|
|
// fontWeight: 'bold',
|
|
// padding: [0, 0, 5, 0]
|
|
// },
|
|
// name: {
|
|
// color: '#7894A8',
|
|
// fontSize: fitChartSize(12)
|
|
// }
|
|
// }
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: fitChartSize(16),
|
|
fontWeight: 'bold',
|
|
color:'#fff',
|
|
fontWeight: 'bold',
|
|
formatter: function (o) {
|
|
let data = o.data.value
|
|
return `{value|${data}}` + '\n' + `{name|整改率}`
|
|
},
|
|
rich: {
|
|
value: {
|
|
color: '#fff',
|
|
fontSize: fitChartSize(24),
|
|
fontWeight: 'bold',
|
|
padding: [0, 0, 5, 0]
|
|
},
|
|
name: {
|
|
color: '#7894A8',
|
|
fontSize: fitChartSize(12)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
data: [
|
|
{ value: 200, name: '异常状况1' },
|
|
{ value: 500, name: '异常状况2' },
|
|
{ value: 234, name: '异常状况3' },
|
|
{ value: 135, name: '异常状况4' },
|
|
{ value: 100, name: '异常状况5' },
|
|
{ value: 777, name: '异常状况6' },
|
|
{ value: 888, name: '其他' },
|
|
]
|
|
|
|
},
|
|
],
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.traffic-box-1{
|
|
width:vw(815);
|
|
height:vh(975);
|
|
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
|
|
border-radius: 0px 0px 0px 0px;
|
|
margin-top:vh(100);
|
|
position: relative;
|
|
z-index: 9;
|
|
.list-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding:0 vw(10);
|
|
.item-li{
|
|
width: vw(388);
|
|
height: vh(420);
|
|
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
|
border-radius: 0px 0px 0px 0px;
|
|
border: 1px solid;
|
|
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
|
.title-3{
|
|
margin-left:vw(10);
|
|
position: relative;
|
|
width: vw(344);
|
|
height: vh(12);
|
|
margin-top: vh(20);
|
|
background-image: url('@/assets/images/title-6.png');
|
|
background-size: 100% 100%;
|
|
|
|
& > span {
|
|
position: absolute;
|
|
bottom: vh(4);
|
|
left: vw(20);
|
|
font-size: vw(15);
|
|
font-weight: bold;
|
|
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
|
color: transparent; /* 兼容其他浏览器 */
|
|
}
|
|
}
|
|
.chart-box{
|
|
width:100%;
|
|
height:vh(370);
|
|
}
|
|
}
|
|
}
|
|
.title-num{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding:vw(40);
|
|
.item-box{
|
|
flex: 1;
|
|
.item-t{
|
|
display: flex;
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
color: rgba(255,255,255,0.8);
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-bottom:vh(20);
|
|
img{
|
|
margin-right:vw(5);
|
|
width:vw(8);
|
|
height:vh(8);
|
|
}
|
|
|
|
}
|
|
.item-num{
|
|
width:vw(134);
|
|
height:vh(30);
|
|
background-image: url('@/assets/images/t-box-title-bg-1.png');
|
|
background-size: 100% 100%;
|
|
font-weight: bold;
|
|
font-size: vw(24);
|
|
color: #02F9FA;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding-left:vw(15);
|
|
position: relative;
|
|
left:vw(-8);
|
|
span{
|
|
position: relative;
|
|
top:vh(-5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |