lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:完善交通页面样式

Browse Source
This commit is contained in:
zjc
2025-03-07 20:01:38 +08:00
parent 5619c9ddfb
commit 9c5206ff49
2 changed files with 51 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/traffic/components/box-1.vue
View File

@@ -36,12 +36,16 @@
<div class="chart__inner"> <div class="chart__inner">
<div> <div>
<spotRate <spotRate
:dataList="chartData.roadNum" :dataList="chartData.roadNum"
:total="chartData.totalNum" :total="chartData.totalNum"
label="拥堵频次总数" label="拥堵频次总数"
/> />
<ul class="chart__legend"> <ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in chartData.roadNum" :key="index"> <li
class="chart__legend-item"
v-for="(item, index) in chartData.roadNum"
:key="index"
>
<p class="dot" :style="{ background: colors[index] }" /> <p class="dot" :style="{ background: colors[index] }" />
<p class="name">{{ item.name }}</p> <p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p> <p class="value">{{ item.value }}%</p>
@@ -55,12 +59,16 @@
<div class="chart__inner"> <div class="chart__inner">
<div> <div>
<spotRate <spotRate
:dataList="chartData.roadTime" :dataList="chartData.roadTime"
:total="chartData.totalTime" :total="chartData.totalTime"
label="拥堵总时长" label="拥堵总时长"
/> />
<ul class="chart__legend"> <ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in chartData.roadTime" :key="index"> <li
class="chart__legend-item"
v-for="(item, index) in chartData.roadTime"
:key="index"
>
<p class="dot" :style="{ background: colors[index] }" /> <p class="dot" :style="{ background: colors[index] }" />
<p class="name">{{ item.name }}</p> <p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p> <p class="value">{{ item.value }}%</p>
@@ -72,31 +80,43 @@
<div class="chart-item"> <div class="chart-item">
<Title3 title="拥堵类型频次占比" /> <Title3 title="拥堵类型频次占比" />
<div class="chart__inner"> <div class="chart__inner">
<div> <div>
<spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" /> <spotRate :dataList="chartData.typeNum" :total="chartData.totalNum" label="拥堵总数" />
<ul class="chart__legend"> <ul class="chart__legend">
<li class="chart__legend-item" v-for="(item, index) in chartData.typeNum" :key="index"> <li
<p class="dot" :style="{ background: colors[index] }" /> class="chart__legend-item"
<p class="name">{{ item.name }}</p> v-for="(item, index) in chartData.typeNum"
<p class="value">{{ item.value }}%</p> :key="index"
</li> >
</ul> <p class="dot" :style="{ background: colors[index] }" />
</div> <p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p>
</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="chart-item"> <div class="chart-item">
<Title3 title="拥堵类型时长占比" /> <Title3 title="拥堵类型时长占比" />
<div class="chart__inner"> <div class="chart__inner">
<div> <div>
<spotRate :dataList="chartData.typeTime" :total="chartData.totalTime" label="拥堵总数" /> <spotRate
<ul class="chart__legend"> :dataList="chartData.typeTime"
<li class="chart__legend-item" v-for="(item, index) in chartData.typeTime" :key="index"> :total="chartData.totalTime"
<p class="dot" :style="{ background: colors[index] }" /> label="拥堵总数"
<p class="name">{{ item.name }}</p> />
<p class="value">{{ item.value }}%</p> <ul class="chart__legend">
</li> <li
</ul> class="chart__legend-item"
</div> v-for="(item, index) in chartData.typeTime"
:key="index"
>
<p class="dot" :style="{ background: colors[index] }" />
<p class="name">{{ item.name }}</p>
<p class="value">{{ item.value }}%</p>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -185,7 +205,7 @@
position: absolute; position: absolute;
content: ''; content: '';
width: vw(4); width: vw(4);
height: vh(40); height: vh(30);
background-color: #0096ff; background-color: #0096ff;
} }

4
src/views/traffic/components/spotRate.vue
View File

@@ -41,7 +41,7 @@
{ {
type: 'pie', type: 'pie',
center: ['50%', '50%'], center: ['50%', '50%'],
radius: ['70%', '90%'], radius: ['60%', '80%'],
itemStyle: { itemStyle: {
borderWidth: fitChartSize(4), borderWidth: fitChartSize(4),
borderColor: '#093672' borderColor: '#093672'
@@ -101,6 +101,6 @@
<style scoped lang="scss"> <style scoped lang="scss">
.spotRate { .spotRate {
width: vw(200); width: vw(200);
height: vh(260); height: vh(200);
} }
</style> </style>