diff --git a/src/pages/screen/list/index.vue b/src/pages/screen/list/index.vue
index 71be2c1..c12b1af 100644
--- a/src/pages/screen/list/index.vue
+++ b/src/pages/screen/list/index.vue
@@ -67,7 +67,7 @@
-
+
@@ -105,15 +105,45 @@
{{ item.currencyPair }} |
- {{ item.amount }} |
- {{ item.total }} |
- {{ (item.percent * 100).toFixed(2) + '%' }} |
+ ${{ item.amount }} |
+ {{ parseInt(item.total) }}M |
+ {{ (item.percent * 100).toFixed(2) }}% |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 全国用电及客运情况
+
+
+
@@ -234,7 +264,7 @@
新增信贷数据
-
+
@@ -258,7 +288,7 @@
以美元计算进口年率
-
+
@@ -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}
{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}
{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%;
diff --git a/src/styles/page/screen.scss b/src/styles/page/screen.scss
index 08d390c..afef8da 100644
--- a/src/styles/page/screen.scss
+++ b/src/styles/page/screen.scss
@@ -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;