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

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

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