huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

大屏展示完善

Browse Source
dev_2022-04-07
yujialong 3 years ago
parent 71f3ffbb29
commit 2a3df5a7af
2 changed files with 175 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 177
      src/pages/screen/list/index.vue
  2. 17
      src/styles/page/screen.scss

177
src/pages/screen/list/index.vue
Unescape View File

@ -67,7 +67,7 @@
</div>
</div>
<div class="main_center fl">
<div class="center_text" style="position: relative;">
<div class="center_text" style="position: relative;margin-bottom: 25px;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
@ -105,15 +105,45 @@
<tbody>
<tr v-for="(item, i) in cryptoList" :key="i">
<td>{{ item.currencyPair }}</td>
<td>{{ item.amount }}</td>
<td>{{ item.total }}</td>
<td><p :class="['percent', {fall: item.percent < 0}]">{{ (item.percent * 100).toFixed(2) + '%' }}</p></td>
<td>${{ item.amount }}</td>
<td>{{ parseInt(item.total) }}M</td>
<td><p :class="['percent', {fall: item.percent < 0}]">{{ (item.percent * 100).toFixed(2) }}%</p></td>
</tr>
</tbody>
</table>
</div>
<!-- <div id="chart_map" style="width:100%;height:610px;"></div> -->
</div>
<div class="center_text" style="position: relative;height: 232px">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title" style="left: 48%">
<img src="@/assets/img/screen/t_3.png" alt="">
全国用电及客运情况
</div>
<div class="charts">
<div class="chart" id="chart7"></div>
<div class="chart" id="chart8"></div>
</div>
</div>
</div>
<div class="main_right fr">
@ -234,7 +264,7 @@
<img src="@/assets/img/screen/t_7.png" alt="">
新增信贷数据
</div>
<div id="chart5" class="chart" style="width:100%;height: 280px;"></div>
<div id="chart5" class="chart" style="width:100%;height: 310px;"></div>
</div>
</div>
<div class="bottom_4 fr">
@ -258,7 +288,7 @@
<img src="@/assets/img/screen/t_7.png" alt="">
以美元计算进口年率
</div>
<div id="chart6" class="chart" style="width:100%;height: 280px;"></div>
<div id="chart6" class="chart" style="width:100%;height: 310px;"></div>
</div>
</div>
</div>
@ -470,7 +500,7 @@ export default {
// 国际旅游外汇收入构成
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => {
const { comment, data } = res
const colors = ['#f845f1', '#ad46f3', '#5045f6', '#4777f5', '#44aff0', '#45dbf7', '#f6d54a']
const colors = ['#f845f1', '#44aff0', '#ad46f3', '#5045f6', '#4777f5', '#45dbf7', '#f6d54a']
const series = []
data.map((e, i) => {
series.push({
@ -711,7 +741,7 @@ export default {
grid: {
left: '10%',
right: '8%',
bottom: '10%'
bottom: '12%'
},
xAxis: {
type: 'category',
@ -837,7 +867,7 @@ export default {
grid: {
left: '12%',
right: '5%',
bottom: '14%'
bottom: '12%'
},
legend: {
icon: 'rect',
@ -918,6 +948,128 @@ export default {
]
})
}).catch(res => {})
// 全社会用电分类情况
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuiyongdianfenleiqingkuangbiao&tableId=50`).then(res => {
const { comment, data } = res
const item = data[4]
echarts.init(document.querySelector(`#chart7`)).setOption({
title: [{
text: '全社会用电分类情况',
top: '11%',
left: 'center',
textStyle: {
color: '#fff',
fontSize: '16'
}
}],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function(p) { //其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
}
},
legend: {
top: '90%',
itemWidth: 10,
itemHeight: 10,
data: ['第一产业用电量', '第二产业用电量', '第三产业用电量'],
textStyle: {
color: 'rgba(255,255,255,.5)',
fontSize: '12',
}
},
series: [{
name: '全社会用电分类情况',
type: 'pie',
center: ['50%', '55%'],
radius: ['40%', '60%'],
color: ['#06dcab', '#065aab', '#06f0ab'],
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: item.ecipi,
name: '第一产业用电量'
},
{
value: item.ecitsi,
name: '第二产业用电量'
},
{
value: item.ecitti,
name: '第三产业用电量'
}
]
}]
})
}).catch(res => {})
// 全社会客货运输量
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuikehuoyunshuliang&tableId=51`).then(res => {
const { comment, data } = res
const item = data[4]
echarts.init(document.querySelector(`#chart8`)).setOption({
title: [{
text: '全社会客货运输量',
top: '11%',
left: 'center',
textStyle: {
color: '#fff',
fontSize: '16'
}
}],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function(p) { //其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
}
},
legend: {
top: '90%',
itemWidth: 10,
itemHeight: 10,
data: ['民航', '水运', '公路', '铁路'],
textStyle: {
color: 'rgba(255,255,255,.5)',
fontSize: '12',
}
},
series: [{
name: '全社会客货运输量',
type: 'pie',
center: ['50%', '55%'],
radius: ['40%', '60%'],
color: ['#39e5e5', '#e74fd4', '#5e31e9', '#26aafb'],
label: {
show: false
},
labelLine: {
show: false
},
data: [{
value: data[0].freight_turnover,
name: '民航'
}, {
value: data[1].freight_turnover,
name: '水运'
}, {
value: data[2].freight_turnover,
name: '公路'
}, {
value: data[3].freight_turnover,
name: '铁路'
}
]
}]
})
}).catch(res => {})
}
}
};
@ -970,6 +1122,13 @@ export default {
}
}
}
.charts {
display: flex;
.chart {
width: 50%;
height: 220px;
}
}
/*header开始*/
.header{
width: 100%;

17
src/styles/page/screen.scss
Unescape View File

@ -156,7 +156,7 @@
}
.data_content .data_main .main_center .center_text{
width: calc(100% - 50px);
height: 610px;
height: 350px;
margin-left: 25px;
margin-right: 25px;
box-sizing: border-box;
@ -278,15 +278,12 @@
}
.data_content .data_bottom{
width: calc(100% - 40px);
height: 280px;
height: 310px;
margin-left: 20px;
}
.data_content .data_bottom div{
}
.data_content .data_bottom .bottom_1{
width: 24%;
height: 280px;
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
@ -294,12 +291,12 @@
}
.data_content .data_bottom .bottom_center{
width: 52%;
height: 280px;
height: 310px;
padding: 0 25px;
}
.data_content .data_bottom .bottom_2{
width: 100%;
height: 280px;
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
@ -307,7 +304,7 @@
}
.data_content .data_bottom .bottom_3{
width: calc(50% - 40px);
height: 280px;
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
@ -316,7 +313,7 @@
}
.data_content .data_bottom .bottom_4{
width: 24%;
height: 280px;
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;

Write Preview
Loading…
Cancel
Save