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;