diff --git a/src/pages/screen/list/index.vue b/src/pages/screen/list/index.vue
index f00ea39..097eb74 100644
--- a/src/pages/screen/list/index.vue
+++ b/src/pages/screen/list/index.vue
@@ -1,270 +1,306 @@
 <template>
   <div class="wrap">
     <!-- 全屏 -->
-    <img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen">
+    <img class="full"
+         src="@/assets/img/screen/full.png"
+         alt=""
+         @click="fullScreen">
     <!--header-->
     <div class="header">
-        <div class="bg_header">
-            <div class="header_nav fl t_title">Dataforward 数据看板</div> 
-        </div>
+      <div class="bg_header">
+        <div class="header_nav fl t_title">Dataforward 数据看板</div>
+      </div>
     </div>
 
     <!--main-->
     <div class="content">
       <div class="left">
-          <div class="item">
-              <!--左上边框-->
-              <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">
-                  <img src="@/assets/img/screen/t_1.png" alt="">
-                中国宏观杠杆率
-              </div>
-              <div id="chart1" class="chart" style="height: 280px;"></div>
+        <div class="item">
+          <!--左上边框-->
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
           </div>
-          <div class="item">
-              <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">
-                  <img src="@/assets/img/screen/t_2.png" alt="">
-                  新增信贷数据
-              </div>
-              <div id="chart5" class="chart t_btn9" style="height: 280px;"></div>
+          <!--右上边框-->
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
           </div>
-          <div class="item">
-            <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">
-                <img src="@/assets/img/screen/t_7.png" alt="">
-                {{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数
-            </div>
-            <div class="main_table">
-              <table>
-                <thead>
-                  <tr>
-                    <th width="70%">概况名称</th>
-                    <th>指数</th>
-                  </tr>
-                </thead>
-              </table>
-            </div>
-            <div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto">
-              <table>
-                <tbody>
-                  <tr v-for="(item, i) in goodsSell" :key="i">
-                    <td width="70%">{{ item.hct }}</td>
-                    <td>{{ item.rcpi }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </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">
+            <img src="@/assets/img/screen/t_1.png"
+                 alt="">
+            中国宏观杠杆率
+          </div>
+          <div id="chart1"
+               class="chart"
+               style="height: 280px;"></div>
+        </div>
+        <div class="item">
+          <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">
+            <img src="@/assets/img/screen/t_2.png"
+                 alt="">
+            新增信贷数据
+          </div>
+          <div id="chart5"
+               class="chart t_btn9"
+               style="height: 280px;"></div>
+        </div>
+        <div class="item">
+          <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">
+            <img src="@/assets/img/screen/t_7.png"
+                 alt="">
+            {{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数
+          </div>
+          <div class="main_table">
+            <table>
+              <thead>
+                <tr>
+                  <th width="70%">概况名称</th>
+                  <th>指数</th>
+                </tr>
+              </thead>
+            </table>
           </div>
+          <div class="main_table"
+               ref="tableWrap"
+               style="height: 196px;margin-top: 0;overflow: auto">
+            <table>
+              <tbody>
+                <tr v-for="(item, i) in goodsSell"
+                    :key="i">
+                  <td width="70%">{{ item.hct }}</td>
+                  <td>{{ item.rcpi }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
       <div class="middle">
-          <div class="item" style="height: 350px">
-              <!--左上边框-->
-              <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">
-                  <img src="@/assets/img/screen/t_3.png" alt="">
-                  中国GDP年率报告
-              </div>
-              <div class="main_table">
-                <table>
-                  <thead>
-                    <tr>
-                      <th width="50%">时间</th>
-                      <th width="50%">年率</th>
-                    </tr>
-                  </thead>
-                </table>
-              </div>
-              <div class="main_table" ref="gdpList" style="max-height: 260px;margin-top: 0;overflow: auto;">
-                <table>
-                  <tbody>
-                    <template v-for="(item, i) in gdps">
-                      <tr v-if="item.value != '0'" :key="i">
-                        <td width="50%">{{ item.date_index }}</td>
-                        <td width="50%">${{ item.value }}</td>
-                      </tr>
-                    </template>
-                  </tbody>
-                </table>
-              </div>
+        <div class="item"
+             style="height: 350px">
+          <!--左上边框-->
+          <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">
+            <img src="@/assets/img/screen/t_3.png"
+                 alt="">
+            中国GDP年率报告
+          </div>
+          <div class="main_table">
+            <table>
+              <thead>
+                <tr>
+                  <th width="50%">时间</th>
+                  <th width="50%">年率</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+          <div class="main_table"
+               ref="gdpList"
+               style="max-height: 260px;margin-top: 0;overflow: auto;">
+            <table>
+              <tbody>
+                <template v-for="(item, i) in gdps">
+                  <tr v-if="item.value != '0'"
+                      :key="i">
+                    <td width="50%">{{ item.date_index }}</td>
+                    <td width="50%">${{ item.value }}</td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
           </div>
-          <div class="item" style="height: 520px;">
-              <!--左上边框-->
-              <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">
-                  <img src="@/assets/img/screen/t_3.png" alt="">
-                  主要央行利率
-              </div>
-              <div class="earth">
-                <img class="lbx" src="@/assets/img/screen/lbx.png" alt="">
-                <img class="jt" src="@/assets/img/screen/jt.png" alt="">
-                <img class="map" src="@/assets/img/screen/map.png" alt="">
-              </div>
-              <div class="chart" id="chart7" style="height: 500px"></div>
+        </div>
+        <div class="item"
+             style="height: 520px;">
+          <!--左上边框-->
+          <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">
+            <img src="@/assets/img/screen/t_3.png"
+                 alt="">
+            主要央行利率
           </div>
+          <div class="earth">
+            <img class="lbx"
+                 src="@/assets/img/screen/lbx.png"
+                 alt="">
+            <img class="jt"
+                 src="@/assets/img/screen/jt.png"
+                 alt="">
+            <img class="map"
+                 src="@/assets/img/screen/map.png"
+                 alt="">
+          </div>
+          <div class="chart"
+               id="chart7"
+               style="height: 500px"></div>
+        </div>
       </div>
       <div class="right">
-          <div class="item">
-              <!--左上边框-->
-              <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">
-                  <img src="@/assets/img/screen/t_4.png" alt="">
-                  全国税收收入
-              </div>
-              <div id="chart3" class="echart t_btn7" style="height: 280px;"></div>
+        <div class="item">
+          <!--左上边框-->
+          <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="item">
-              <!--左上边框-->
-              <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">
-                  <img src="@/assets/img/screen/t_5.png" alt="">
-                  央行货币当局资产负债
-              </div>
-              <div id="chart4" style="height: 280px;"></div>
+          <!--右下边框-->
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
           </div>
-          <div class="item">
-            <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">
-                <img src="@/assets/img/screen/t_7.png" alt="">
-                以美元计算进口年率
-            </div>
-            <div id="chart6" class="chart" style="height: 270px;"></div>
+          <div class="main_title">
+            <img src="@/assets/img/screen/t_4.png"
+                 alt="">
+            全国税收收入
           </div>
+          <div id="chart3"
+               class="echart t_btn7"
+               style="height: 280px;"></div>
+        </div>
+        <div class="item">
+          <!--左上边框-->
+          <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">
+            <img src="@/assets/img/screen/t_5.png"
+                 alt="">
+            央行货币当局资产负债
+          </div>
+          <div id="chart4"
+               style="height: 280px;"></div>
+        </div>
+        <div class="item">
+          <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">
+            <img src="@/assets/img/screen/t_7.png"
+                 alt="">
+            以美元计算进口年率
+          </div>
+          <div id="chart6"
+               class="chart"
+               style="height: 270px;"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -278,965 +314,965 @@ import SockJS from 'sockjs-client'
 import Stomp from 'stompjs'
 import map from './map'
 export default {
-    data() {
-        return {
-          stompClientMarket: null,
-          stompClient: null,
-          goodsSell: [],
-          cryptoList: [],
-          gdps: []
-        }
+  data () {
+    return {
+      stompClientMarket: null,
+      stompClient: null,
+      goodsSell: [],
+      cryptoList: [],
+      gdps: []
+    }
+  },
+  mounted () {
+    this.getList()
+    this.renderChart()
+    this.renderMap()
+  },
+  methods: {
+    // 中国gdp
+    getList () {
+      this.$get(`${this.api.visualPreview}?tableName=hg_zg_gm_zhongguogdpnianlvbaogao&tableId=17`).then(({ comment, data }) => {
+        this.gdps = data
+      }).catch(res => { })
     },
-    mounted() {
-      this.getList()
-      this.renderChart()
-      this.renderMap()
+    // 获取加密货币实时行情
+    getCrypto () {
+      this.$get(`${this.api.getTopList}`).then(res => {
+        this.userCount = res.totalCount
+      }).catch(res => { })
     },
-    methods: {
-      // 中国gdp
-      getList() {
-        this.$get(`${this.api.visualPreview}?tableName=hg_zg_gm_zhongguogdpnianlvbaogao&tableId=17`).then(({ comment, data }) => {
-          this.gdps = data
-        }).catch(res => {})
-      },
-      // 获取加密货币实时行情
-      getCrypto() {
-        this.$get(`${this.api.getTopList}`).then(res => {
-          this.userCount = res.totalCount
-        }).catch(res => {})
-      },
-      // 建立websocket连接
-      connect() {
-        const socket = new SockJS(`${Setting.cryptoBaseURL}currency/websocket`) //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
-        // 获取STOMP子协议的客户端对象
-        this.stompClientMarket = new Stomp.over(socket)
-        this.stompClientMarket.debug = null
-        var this_ = this
-        this.stompClientMarket.connect({}, function(event) {
-          //防止单个用户多次订阅
-          if (this_.subObjMarket == null) {
-            this_.subscribeMarket()
+    // 建立websocket连接
+    connect () {
+      const socket = new SockJS(`${Setting.cryptoBaseURL}currency/websocket`) //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
+      // 获取STOMP子协议的客户端对象
+      this.stompClientMarket = new Stomp.over(socket)
+      this.stompClientMarket.debug = null
+      var this_ = this
+      this.stompClientMarket.connect({}, function (event) {
+        //防止单个用户多次订阅
+        if (this_.subObjMarket == null) {
+          this_.subscribeMarket()
+        } else {
+          this_.subObjMarket.unsubscribe()
+          this_.subscribeMarket()
+        }
+      });
+    },
+    // 訂閲
+    subscribeMarket () {
+      const this_ = this
+      this.subObjMarket = this.stompClientMarket.subscribe(
+        this_.api.market,
+        data => {
+          //订单返回的盘口数据
+          const quo = JSON.parse(data.body)
+          const list = this.cryptoList
+          const coin = list.findIndex(e => e.currencyPair === quo.currencyPair)
+          if (coin === -1) {
+            list.push(quo)
           } else {
-            this_.subObjMarket.unsubscribe()
-            this_.subscribeMarket()
+            list[coin] = quo
           }
-        });
-      },
-      // 訂閲
-      subscribeMarket() {
-        const this_ = this
-        this.subObjMarket = this.stompClientMarket.subscribe(
-          this_.api.market,
-          data => {
-            //订单返回的盘口数据
-            const quo = JSON.parse(data.body)
-            const list = this.cryptoList
-            const coin = list.findIndex(e => e.currencyPair === quo.currencyPair)
-            if (coin === -1) {
-              list.push(quo)
-            } else {
-              list[coin] = quo
-            }
-            this.cryptoList = list
-            this.$forceUpdate()
-          }
-        );
-      },
-      disconnect() {
-        this.stompClient && this.stompClient.disconnect()
-      },
-      // 全屏
-      fullScreen() {
-        // 检测是否全屏
-        if (document.fullscreenElement ||
+          this.cryptoList = list
+          this.$forceUpdate()
+        }
+      );
+    },
+    disconnect () {
+      this.stompClient && this.stompClient.disconnect()
+    },
+    // 全屏
+    fullScreen () {
+      // 检测是否全屏
+      if (document.fullscreenElement ||
         document.mozFullScreenElement ||
         document.msFullScreenElement ||
         document.webkitFullscreenElement) {
-          const fn = document.exitFullScreen ||
+        const fn = document.exitFullScreen ||
           document.mozCancelFullScreen ||
           document.webkitExitFullscreen ||
           document.msExitFullscreen
-          fn.call(document)
-        } else {
-          const el = document.body
-          const fn = el.requestFullscreen ||
+        fn.call(document)
+      } else {
+        const el = document.body
+        const fn = el.requestFullscreen ||
           el.mozRequestFullScreen ||
           el.webkitRequestFullscreen ||
           el.msRequestFullscreen
-          fn.call(el)
+        fn.call(el)
+      }
+    },
+    // 获取图标数据并渲染
+    renderChart () {
+      const animateChart = (chart, option, data, num = 6) => {
+        // 每次向后滚动一个，最后一个从头开始。
+        if (option.dataZoom[0].endValue == data.length) {
+          option.dataZoom[0].endValue = num
+          option.dataZoom[0].startValue = 0
         }
-      },
-      // 获取图标数据并渲染
-      renderChart() {
-        const animateChart = (chart, option, data, num = 6) => {
-          // 每次向后滚动一个，最后一个从头开始。
-          if (option.dataZoom[0].endValue == data.length ) {
-            option.dataZoom[0].endValue = num
-            option.dataZoom[0].startValue = 0
-          }
-          else {
-            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
-            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
-          }
-          chart.setOption(option)
+        else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
         }
-        let chart = {}
-        // 中国宏观杠杆率
-        this.$get(`${this.api.visualPreview}?tableName=hg_zg_zhongguohongguanganggan&tableId=14`).then(res => {
-          const { comment, data } = res
-          const series = []
-          comment.map(e => {
-            // id和操作时间不用显示
-            e.field !== 'id' && e.field !== 'operation_time' && series.push({
-              name: e.comment,
-              type: 'bar',
-              data: data.map(n => n[e.field])
-            })
+        chart.setOption(option)
+      }
+      let chart = {}
+      // 中国宏观杠杆率
+      this.$get(`${this.api.visualPreview}?tableName=hg_zg_zhongguohongguanganggan&tableId=14`).then(res => {
+        const { comment, data } = res
+        const series = []
+        comment.map(e => {
+          // id和操作时间不用显示
+          e.field !== 'id' && e.field !== 'operation_time' && series.push({
+            name: e.comment,
+            type: 'bar',
+            data: data.map(n => n[e.field])
           })
-          const option = {
-            title: {
-              text: ''
+        })
+        const option = {
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: comment.map(e => e.comment),
+            textStyle: {
+              color: '#fff'
             },
-            tooltip: {
-              trigger: 'axis'
+            top: '8%'
+          },
+          grid: {
+            top: '40%',
+            left: '10',
+            right: '40',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [//滑动条
+            {
+              xAxisIndex: 0,//这里是从X轴的0刻度开始
+              show: false,//是否显示滑动条，不影响使用
+              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+              startValue: 0, // 从头开始。
+              endValue: 6  // 一次性展示6个。
+            }
+          ],
+          color: ['#6188e9', '#9032f3', '#a57de3', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
+          xAxis: {
+            type: 'category',
+            boundaryGap: ['20%', '20%'],
+            left: '20%',
+            data: data.map(e => e.date.replace(' 00:00:00', '')), // 年份
+            splitLine: {
+              show: false
             },
-            legend: {
-              data: comment.map(e => e.comment),
-              textStyle:{
+            axisLine: {
+              lineStyle: {
                 color: '#fff'
-              },
-              top: '8%'
+              }
+            }
+          },
+          yAxis: {
+            name: '',
+            type: 'value',
+            left: '20%',
+            splitLine: {
+              show: false
             },
-            grid: {
-              top: '40%',
-              left: '10',
-              right: '40',
-              bottom: '3%',
-              containLabel: true
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            }
+          },
+          series
+        }
+        chart[0] = echarts.init(document.querySelector(`#chart1`))
+        chart[0].setOption(option)
+
+        setInterval(function () {
+          animateChart(chart[0], option, series)
+        }, 1500)
+      }).catch(res => { })
+
+      // 全国税收收入
+      this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_quanguoshuishoushouru&tableId=33`).then(res => {
+        const { comment, data } = res
+        const option = {
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: {
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
             },
-            dataZoom: [//滑动条
-              {
-                xAxisIndex: 0,//这里是从X轴的0刻度开始
-                show: false,//是否显示滑动条，不影响使用
-                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
-                startValue: 0, // 从头开始。
-                endValue: 6  // 一次性展示6个。
+            data: data.map(e => e.quarter)
+          },
+          dataZoom: [//滑动条
+            {
+              xAxisIndex: 0,//这里是从X轴的0刻度开始
+              show: false,//是否显示滑动条，不影响使用
+              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+              startValue: 0, // 从头开始。
+              endValue: 6  // 一次性展示6个。
+            }
+          ],
+          yAxis: {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
               }
-            ],
-            color: ['#6188e9','#9032f3','#a57de3','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
-            xAxis: {
-              type: 'category',
-              boundaryGap: ['20%', '20%'],
-              left: '20%',
-              data: data.map(e => e.date.replace(' 00:00:00', '')), // 年份
-              splitLine: {
-                show: false
-              },
-              axisLine: {
-                lineStyle: {
-                  color: '#fff'
+            }
+          },
+          color: ['#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
+          legend: {
+            data: ['税收收入合计'],
+            textStyle: {
+              color: '#fff'
+            },
+            top: '8%'
+          },
+          grid: {
+            top: '20%',
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          series: [
+            {
+              data: data.map(e => e.ttr),
+              type: 'bar',
+              barWidth: 11,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: [10, 10, 0, 0],
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: "#4033F9"
+                  }, {
+                    offset: 0.8,
+                    color: "#516fff"
+                  }], false),
+                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                 }
+              },
+              showBackground: true,
+              backgroundStyle: {
+                color: 'rgba(180, 180, 180, 0.2)'
+              }
+            }
+          ]
+        }
+        chart[1] = echarts.init(document.querySelector(`#chart3`))
+        chart[1].setOption(option)
+        setInterval(function () {
+          animateChart(chart[1], option, data)
+        }, 1500)
+      }).catch(res => { })
+
+      // 国际旅游外汇收入构成
+      this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => {
+        const { comment, data } = res
+        if (!data.length) return false
+        const colors = ['rgba(227, 46, 138, .5)', 'rgba(123, 41, 225, .8)', 'rgba(12, 53, 215, .8)', 'rgba(69, 223, 124, .8)', 'rgba(155, 1, 55, .8)', 'rgba(200, 142, 22, .8)']
+        const series = []
+        data.map((e, i) => {
+          series.push({
+            value: e.quantity,
+            name: e.indexs,
+            itemStyle: {
+              normal: {
+                color: colors[i]
+              }
+            }
+          })
+        })
+        chart[2] = echarts.init(document.querySelector(`#chart2`))
+        chart[2].setOption({
+          tooltip: {
+            trigger: 'item',
+            formatter: `${data[0].statistical_annual}年{a} <br/>{b} : {c}亿`
+          },
+          legend: {
+            x: 'center',
+            y: '15%',
+            data: data.map(e => e.indexs),
+            icon: 'circle',
+            textStyle: {
+              color: '#fff',
+            }
+          },
+          calculable: true,
+          series: [{
+            name: '',
+            type: 'pie',
+            //起始角度，支持范围[0, 360]
+            // startAngle: 0,
+            //饼图的半径，数组的第一项是内半径，第二项是外半径
+            radius: '45%',
+            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
+            center: ['50%', '65%'],
+            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
+            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
+            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
+            // roseType: 'radius',
+            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
+            // avoidLabelOverlap: false,
+            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+            label: {
+              normal: {
+                show: true,
+                formatter: '{b}{c}亿美元'
+              },
+              emphasis: {
+                show: true
               }
             },
-            yAxis: {
-              name: '',
-              type: 'value',
-              left: '20%',
-              splitLine: {
-                show: false
+            labelLine: {
+              normal: {
+                show: true,
+                length2: 1,
               },
-              axisLine: {
-                lineStyle: {
-                  color: '#fff'
-                }
+              emphasis: {
+                show: true
               }
             },
-            series
-          }
-          chart[0] = echarts.init(document.querySelector(`#chart1`))
-          chart[0].setOption(option)
-          
-          setInterval(function () {
-            animateChart(chart[0], option, series)
-          }, 1500)
-        }).catch(res => {})
+            data: series
+          }]
+        })
+      }).catch(res => { })
 
-        // 全国税收收入
-        this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_quanguoshuishoushouru&tableId=33`).then(res => {
-          const { comment, data } = res
-          const option = {
-            title: {
-              text: ''
+      // 央行货币当局资产负债
+      this.$get(`${this.api.previewData}?tableName=hg_zg_jr_yanghanghuobidangjuzichanfuzhai&tableId=55`).then(res => {
+        const { comment, data } = res
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                color: '#dddc6b'
+              }
+            }
+          },
+          legend: {
+            top: '0%',
+            data: ['货币黄金', '储备货币'],
+            textStyle: {
+              color: 'rgba(255,255,255,.5)',
+              fontSize: '12',
+            }
+          },
+          grid: {
+            left: '10',
+            top: '30',
+            right: '30',
+            bottom: '10',
+            containLabel: true
+          },
+          dataZoom: [//滑动条
+            {
+              xAxisIndex: 0,//这里是从X轴的0刻度开始
+              show: false,//是否显示滑动条，不影响使用
+              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+              startValue: 0, // 从头开始。
+              endValue: 3  // 一次性展示6个。
+            }
+          ],
+          xAxis: [{
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,1)",
+                fontSize: 12,
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,1)'
+              }
             },
-            tooltip: {
-              trigger: 'axis'
+            data: data.map(e => e.statistical_time.replace(' 0:00', ''))
+          }, {
+            axisPointer: {
+              show: false
             },
-            xAxis: {
-              type: 'category',
-              axisLine: {
-                lineStyle: {
-                  color: '#fff'
-                }
+            axisLine: {
+              show: false
+            },
+            position: 'bottom',
+            offset: 20
+          }],
+          yAxis: [{
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,.1)'
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: "rgba(255,255,255,1)",
+                fontSize: 12,
               },
-              data: data.map(e => e.quarter)
             },
-            dataZoom: [//滑动条
-              {
-                xAxisIndex: 0,//这里是从X轴的0刻度开始
-                show: false,//是否显示滑动条，不影响使用
-                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
-                startValue: 0, // 从头开始。
-                endValue: 6  // 一次性展示6个。
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,.1)'
               }
-            ],
-            yAxis: {
-              type: 'value',
-              axisLine: {
-                lineStyle: {
-                  color: '#fff'
-                }
+            }
+          }],
+          series: [{
+            name: '货币黄金',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: '#0184d5',
+                width: 2
               }
             },
-            color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
-            legend: {
-              data: ['税收收入合计'],
-              textStyle:{
-                color: '#fff'
-              },
-              top: '8%'
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(1, 132, 213, 0.4)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(1, 132, 213, 0.1)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+              }
             },
-            grid: {
-              top: '20%',
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
-              containLabel: true
+            itemStyle: {
+              normal: {
+                color: '#0184d5',
+                borderColor: 'rgba(221, 220, 107, .1)',
+                borderWidth: 12
+              }
             },
-            series: [
-              {
-                data: data.map(e => e.ttr),
-                type: 'bar',
-                barWidth: 11,
-                itemStyle: {
-                  normal: {
-                    barBorderRadius: [10, 10, 0, 0],
-                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                      offset: 0,
-                      color: "#4033F9"
-                    }, {
-                      offset: 0.8,
-                      color: "#516fff"
-                    }], false),
-                    shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  }
-                },
-                showBackground: true,
-                backgroundStyle: {
-                  color: 'rgba(180, 180, 180, 0.2)'
-                }
+            data: data.map(e => e.monetary_gold)
+          },
+          {
+            name: '储备货币',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: '#00d887',
+                width: 2
               }
-            ]
-          }
-          chart[1] = echarts.init(document.querySelector(`#chart3`))
-          chart[1].setOption(option)
-          setInterval(function () {
-            animateChart(chart[1], option, data)
-          }, 1500)
-        }).catch(res => {})
-      
-        // 国际旅游外汇收入构成
-        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => {
-          const { comment, data } = res
-          if (!data.length) return false
-          const colors = ['rgba(227, 46, 138, .5)', 'rgba(123, 41, 225, .8)', 'rgba(12, 53, 215, .8)', 'rgba(69, 223, 124, .8)', 'rgba(155, 1, 55, .8)', 'rgba(200, 142, 22, .8)']
-          const series = []
-          data.map((e, i) => {
-            series.push({
-              value: e.quantity,
-              name: e.indexs,
-              itemStyle: {
-                normal: {
-                  color: colors[i]
-                }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(0, 216, 135, 0.4)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(0, 216, 135, 0.1)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
               }
-            })
-          })
-          chart[2] = echarts.init(document.querySelector(`#chart2`))
-          chart[2].setOption({
-            tooltip: {
-                trigger: 'item',
-                formatter: `${data[0].statistical_annual}年{a} <br/>{b} : {c}亿`
             },
-            legend: {
-                x: 'center',
-                y: '15%',
-                data: data.map(e => e.indexs),
-                icon: 'circle',
-                textStyle: {
-                    color: '#fff',
-                }
+            itemStyle: {
+              normal: {
+                color: '#00d887',
+                borderColor: 'rgba(221, 220, 107, .1)',
+                borderWidth: 12
+              }
             },
-            calculable: true,
-            series: [{
-                name: '',
-                type: 'pie',
-                //起始角度，支持范围[0, 360]
-                // startAngle: 0,
-                //饼图的半径，数组的第一项是内半径，第二项是外半径
-                radius : '45%',
-                //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
-                center: ['50%', '65%'],
-                //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
-                // 'radius' 面积展现数据的百分比，半径展现数据的大小。
-                //  'area' 所有扇区面积相同，仅通过半径展现数据大小
-                // roseType: 'radius',
-                //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
-                // avoidLabelOverlap: false,
-                color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],	
-                label: {
-                    normal: {
-                        show: true,
-                        formatter: '{b}{c}亿美元'
-                    },
-                    emphasis: {
-                        show: true
-                    }
-                },
-                labelLine: {
-                    normal: {
-                        show: true,
-                        length2: 1,
-                    },
-                    emphasis: {
-                        show: true
-                    }
-                },
-                data: series
-            }]
+            data: data.map(e => e.reserve_money)
+          }
+          ]
+        }
+        chart[3] = echarts.init(document.querySelector(`#chart4`))
+        chart[3].setOption(option)
+        setInterval(function () {
+          animateChart(chart[3], option, data, 3)
+        }, 1500)
+      }).catch(res => { })
+
+      // 商品零售价格指数
+      this.$get(`${this.api.previewData}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => {
+        const { data } = res
+        const goodsSell = []
+        data.map(e => {
+          goodsSell.push({
+            operation_time: e.operation_time,
+            hct: e.hct,
+            rcpi: e.rcpi
           })
-        }).catch(res => {})
+        })
+        this.goodsSell = [...goodsSell, ...goodsSell]
+      }).catch(res => { })
 
-        // 央行货币当局资产负债
-        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_yanghanghuobidangjuzichanfuzhai&tableId=55`).then(res => {
-          const { comment, data } = res
-          const option = {
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                lineStyle: {
-                  color: '#dddc6b'
-                }
+      // 新增信贷数据
+      this.$get(`${this.api.previewData}?tableName=hg_zg_jr_xinzengxindaishuju&tableId=34`).then(res => {
+        const { comment, data } = res
+        const option = {
+          title: {
+            text: '',
+            subtext: '',
+            top: '3',
+            right: '0'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '80',
+            right: '12%',
+            bottom: '12%'
+          },
+          dataZoom: [//滑动条
+            {
+              xAxisIndex: 0,//这里是从X轴的0刻度开始
+              show: false,//是否显示滑动条，不影响使用
+              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+              startValue: 0, // 从头开始。
+              endValue: 3  // 一次性展示6个。
+            }
+          ],
+          xAxis: {
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
               }
             },
-            legend: {
-              top: '0%',
-              data: ['货币黄金', '储备货币'],
+            axisLabel: {
+              interval: 0,
               textStyle: {
-                color: 'rgba(255,255,255,.5)',
-                fontSize: '12',
+                color: '#fff',
               }
             },
-            grid: {
-              left: '10',
-              top: '30',
-              right: '30',
-              bottom: '10',
-              containLabel: true
-            },
-            dataZoom: [//滑动条
-              {
-                xAxisIndex: 0,//这里是从X轴的0刻度开始
-                show: false,//是否显示滑动条，不影响使用
-                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
-                startValue: 0, // 从头开始。
-                endValue: 3  // 一次性展示6个。
+            data: data.map(e => e.month)
+          },
+          yAxis: [{
+            type: 'value',
+            name: '',
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
               }
-            ],
-            xAxis: [{
-              type: 'category',
-              boundaryGap: false,
-              axisLabel: {
-                textStyle: {
-                  color: "rgba(255,255,255,1)",
-                  fontSize: 12,
-                },
-              },
-              axisLine: {
-                lineStyle: {
-                  color: 'rgba(255,255,255,1)'
-                }
-              },
-              data: data.map(e => e.statistical_time.replace(' 0:00', ''))
-            }, {
-              axisPointer: {
-                show: false
-              },
-              axisLine: {
-                show: false
-              },
-              position: 'bottom',
-              offset: 20
-            }],
-            yAxis: [{
-              type: 'value',
-              axisTick: {
-                show: false
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 12
               },
-              axisLine: {
-                lineStyle: {
-                  color: 'rgba(255,255,255,.1)'
-                }
+              textStyle: {
+                color: '#fff'
               },
-              axisLabel: {
-                textStyle: {
-                  color: "rgba(255,255,255,1)",
-                  fontSize: 12,
-                },
+              formatter: '{value}亿元'
+            },
+            splitLine: {
+              show: false
+            }
+          },
+          {
+            type: 'value',
+            name: '',
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 12
               },
-              splitLine: {
-                lineStyle: {
-                  color: 'rgba(255,255,255,.1)'
-                }
-              }
-            }],
-            series: [{
-                name: '货币黄金',
-                type: 'line',
-                smooth: true,
-                symbol: 'circle',
-                symbolSize: 5,
-                showSymbol: false,
-                lineStyle: {
-                  normal: {
-                    color: '#0184d5',
-                    width: 2
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                      offset: 0,
-                      color: 'rgba(1, 132, 213, 0.4)'
-                    }, {
-                      offset: 0.8,
-                      color: 'rgba(1, 132, 213, 0.1)'
-                    }], false),
-                    shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  }
-                },
-                itemStyle: {
-                  normal: {
-                    color: '#0184d5',
-                    borderColor: 'rgba(221, 220, 107, .1)',
-                    borderWidth: 12
-                  }
-                },
-                data: data.map(e => e.monetary_gold)
+              textStyle: {
+                color: '#fff'
               },
-              {
-                name: '储备货币',
-                type: 'line',
-                smooth: true,
-                symbol: 'circle',
-                symbolSize: 5,
-                showSymbol: false,
-                lineStyle: {
-                  normal: {
-                    color: '#00d887',
-                    width: 2
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                      offset: 0,
-                      color: 'rgba(0, 216, 135, 0.4)'
-                    }, {
-                      offset: 0.8,
-                      color: 'rgba(0, 216, 135, 0.1)'
-                    }], false),
-                    shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  }
-                },
-                itemStyle: {
-                  normal: {
-                    color: '#00d887',
-                    borderColor: 'rgba(221, 220, 107, .1)',
-                    borderWidth: 12
-                  }
-                },
-                data: data.map(e => e.reserve_money)
+              formatter: '{value}%'
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: ['#25CEF3']
               }
-            ]
+            }
           }
-          chart[3] = echarts.init(document.querySelector(`#chart4`))
-          chart[3].setOption(option)
-          setInterval(function () {
-            animateChart(chart[3], option, data, 3)
-          }, 1500)
-        }).catch(res => {})
-
-        // 商品零售价格指数
-        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => {
-          const { data } = res
-          const goodsSell = []
-          data.map(e => {
-            goodsSell.push({
-              operation_time: e.operation_time,
-              hct: e.hct,
-              rcpi: e.rcpi
-            })
-          })
-          this.goodsSell = [...goodsSell, ...goodsSell]
-        }).catch(res => {})
-      
-        // 新增信贷数据
-        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_xinzengxindaishuju&tableId=34`).then(res => {
-          const { comment, data } = res
-          const option = {
-            title: {
-              text: '',
-              subtext: '',
-              top: '3',
-              right: '0'
+          ],
+          series: [{
+            name: '当月',
+            type: 'line',
+            yAxisIndex: 0,
+            smooth: false,
+            symbolSize: 5,
+            lineStyle: {
+              normal: {
+                width: 2
+              }
             },
-            tooltip: {
-              trigger: 'axis'
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(230, 48, 123, 0.8)'
+                }, {
+                  offset: 0.8,
+                  color: 'rgba(230, 48, 123, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+                shadowBlur: 10
+              }
             },
-            grid: {
-              left: '80',
-              right: '12%',
-              bottom: '12%'
+            itemStyle: {
+              normal: {
+                color: '#DA2F78'
+              }
             },
-            dataZoom: [//滑动条
-              {
-                xAxisIndex: 0,//这里是从X轴的0刻度开始
-                show: false,//是否显示滑动条，不影响使用
-                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
-                startValue: 0, // 从头开始。
-                endValue: 3  // 一次性展示6个。
+            data: data.map(e => e.tsm)
+          },
+          {
+            name: '当月环比增长',
+            type: 'bar',
+            barWidth: 12,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [10, 10, 0, 0],
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: "#4033F9"
+                }, {
+                  offset: 0.8,
+                  color: "#BA97F9"
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
               }
-            ],
-            xAxis: {
-              type: 'category',
-              axisLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              },
-              axisLabel: {
-                interval: 0,
-                textStyle: {
-                  color: '#fff',
-                }
-              },
-              data: data.map(e => e.month)
             },
-            yAxis: [{
-                type: 'value',
-                name: '',
-                axisLine: {
-                  lineStyle: {
-                    color: '#57617B'
-                  }
-                },
-                axisLabel: {
-                  margin: 10,
-                  textStyle: {
-                    fontSize: 12
-                  },
-                  textStyle: {
-                    color: '#fff'
-                  },
-                  formatter: '{value}亿元'
-                },
-                splitLine: {
-                  show: false
-                }
-              },
-              {
-                type: 'value',
-                name: '',
-                axisLabel: {
-                  margin: 10,
-                  textStyle: {
-                    fontSize: 12
-                  },
-                  textStyle: {
-                    color: '#fff'
-                  },
-                  formatter: '{value}%'
-                },
-                splitLine: {
-                  show: true,
-                  lineStyle: {
-                    type: 'dashed',
-                    color: ['#25CEF3']
-                  }
-                }
+            data: data.map(e => e.mmomi.replace('%', ''))
+          }
+          ]
+        }
+        chart[4] = echarts.init(document.querySelector(`#chart5`))
+        chart[4].setOption(option)
+        setInterval(function () {
+          animateChart(chart[4], option, data, 3)
+        }, 1500)
+      }).catch(res => { })
+
+      // 以美元计算进口年率
+      this.$get(`${this.api.visualPreview}?tableName=hg_zg_my_yimeiyuanjisuanjinkounianlv&tableId=22`).then(res => {
+        const { comment, data } = res
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+          },
+          grid: {
+            left: '12%',
+            right: '5%',
+            bottom: '26%'
+          },
+          legend: {
+            icon: 'rect',
+            itemWidth: 14,
+            itemHeight: 5,
+            itemGap: 10,
+            data: [data[0].merchandise],
+            left: '10px',
+            top: '0px',
+            textStyle: {
+              fontSize: 12,
+              color: '#fff'
+            }
+          },
+          dataZoom: [//滑动条
+            {
+              xAxisIndex: 0,//这里是从X轴的0刻度开始
+              show: false,//是否显示滑动条，不影响使用
+              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+              startValue: 0, // 从头开始。
+              endValue: 6  // 一次性展示6个。
+            }
+          ],
+          xAxis: [{
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
               }
-            ],
-            series: [{
-                name: '当月',
-                type: 'line',
-                yAxisIndex: 0,
-                smooth: false,
-                symbolSize: 5,
-                lineStyle: {
-                  normal: {
-                    width: 2
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                      offset: 0,
-                      color: 'rgba(230, 48, 123, 0.8)'
-                    }, {
-                      offset: 0.8,
-                      color: 'rgba(230, 48, 123, 0)'
-                    }], false),
-                    shadowColor: 'rgba(0, 0, 0, 0.1)',
-                    shadowBlur: 10
-                  }
-                },
-                itemStyle: {
-                  normal: {
-                    color: '#DA2F78'
-                  }
-                },
-                data: data.map(e => e.tsm)
+            },
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: '#fff',
               },
-              {
-                name: '当月环比增长',
-                type: 'bar',
-                barWidth: 12,
-                yAxisIndex: 1,
-                itemStyle: {
-                  normal: {
-                    barBorderRadius: [10, 10, 0, 0],
-                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                      offset: 0,
-                      color: "#4033F9"
-                    }, {
-                      offset: 0.8,
-                      color: "#BA97F9"
-                    }], false),
-                    shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  }
-                },
-                data: data.map(e => e.mmomi.replace('%', ''))
-              }
-            ]
-          }
-          chart[4] = echarts.init(document.querySelector(`#chart5`))
-          chart[4].setOption(option)
-          setInterval(function () {
-            animateChart(chart[4], option, data, 3)
-          }, 1500)
-        }).catch(res => {})
-      
-        // 以美元计算进口年率
-        this.$get(`${this.api.visualPreview}?tableName=hg_zg_my_yimeiyuanjisuanjinkounianlv&tableId=22`).then(res => {
-          const { comment, data } = res 
-          const option = {
-            tooltip: {
-              trigger: 'axis',
+              rotate: 60
             },
-            grid: {
-              left: '12%',
-              right: '5%',
-              bottom: '26%'
+            data: data.map(e => e.date_index)
+          }],
+          yAxis: [{
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
             },
-            legend: {
-              icon: 'rect',
-              itemWidth: 14,
-              itemHeight: 5,
-              itemGap: 10,
-              data: [data[0].merchandise],
-              left: '10px',
-              top: '0px',
+            axisLabel: {
+              margin: 10,
               textStyle: {
                 fontSize: 12,
                 color: '#fff'
-              }
-            },
-            dataZoom: [//滑动条
-              {
-                xAxisIndex: 0,//这里是从X轴的0刻度开始
-                show: false,//是否显示滑动条，不影响使用
-                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
-                startValue: 0, // 从头开始。
-                endValue: 6  // 一次性展示6个。
-              }
-            ],
-            xAxis: [{
-              type: 'category',
-              axisLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              },
-              axisLabel: {
-                interval: 0,
-                textStyle: {
-                  color: '#fff',
-                },
-                rotate: 60
-              },
-              data: data.map(e => e.date_index)
-            }],
-            yAxis: [{
-              type: 'value',
-              axisTick: {
-                show: false
               },
-              axisLine: {
-                lineStyle: {
-                  color: '#57617B'
-                }
-              },
-              axisLabel: {
-                margin: 10,
-                textStyle: {
-                  fontSize: 12,
-                  color: '#fff'
-                },
-                formatter: '{value}%'
-              },
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  type: 'dashed',
-                  color: ['#25CEF3']
-                }
+              formatter: '{value}%'
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: ['#25CEF3']
               }
+            }
 
-            }],
-            series: [{
-                name: '以美元计算进口年率',
-                type: 'bar',
-                barWidth: 8,
-                itemStyle: {
-                  normal: {
-                    barBorderRadius: [10, 10, 0, 0],
-                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                      offset: 0,
-                      color: "#009AFD"
-                    }, {
-                      offset: 0.8,
-                      color: "#33DAFF"
-                    }], false),
-                    shadowColor: 'rgba(0, 0, 0, 0.1)',
-                  }
-                },
-                data: data.map(e => e.value)
+          }],
+          series: [{
+            name: '以美元计算进口年率',
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [10, 10, 0, 0],
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: "#009AFD"
+                }, {
+                  offset: 0.8,
+                  color: "#33DAFF"
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
               }
-            ]
+            },
+            data: data.map(e => e.value)
           }
-          chart[5] = echarts.init(document.querySelector(`#chart6`))
-          chart[5].setOption(option)
-          setInterval(function () {
-            animateChart(chart[5], option, data)
-          }, 1500)
-        }).catch(res => {})
-      
-        this.scrollTable()
+          ]
+        }
+        chart[5] = echarts.init(document.querySelector(`#chart6`))
+        chart[5].setOption(option)
+        setInterval(function () {
+          animateChart(chart[5], option, data)
+        }, 1500)
+      }).catch(res => { })
+
+      this.scrollTable()
 
-        // 监听resize事件，动态改变chart大小
-        window.addEventListener('resize', () => {
-          for (let i = 0; i < 7; i++) {
-            chart[i] && chart[i].resize()
+      // 监听resize事件，动态改变chart大小
+      window.addEventListener('resize', () => {
+        for (let i = 0; i < 7; i++) {
+          chart[i] && chart[i].resize()
+        }
+      })
+    },
+    // 生成世界地图
+    async renderMap () {
+      // 利率全部表id和name
+      const param = [
+        { tableId: 2, tableName: 'll_yh_usa' },
+        { tableId: 3, tableName: 'll_yh_euro' },
+        { tableId: 4, tableName: 'll_yh_newzealand' },
+        { tableId: 5, tableName: 'll_yh_china' },
+        { tableId: 6, tableName: 'll_yh_switzerland' },
+        { tableId: 7, tableName: 'll_yh_english' },
+        { tableId: 8, tableName: 'll_yh_australia' },
+        { tableId: 9, tableName: 'll_yh_japan' },
+        { tableId: 10, tableName: 'll_yh_russia' },
+        { tableId: 11, tableName: 'll_yh_india' },
+        { tableId: 12, tableName: 'll_yh_brazil' }
+      ]
+      this.$post(this.api.multipleTablePreview, param).then(res => {
+        // 每个国家的央行利率，因为国家名称无法直接取数据库里的，所以这里固定好
+        const data = [
+          {
+            name: '澳大利亚',
+            value: res.ll_yh_australia[0].tvalue
+          },
+          {
+            name: '巴西',
+            value: res.ll_yh_brazil[0].tvalue
+          },
+          {
+            name: '中国',
+            value: res.ll_yh_china[1].tvalue
+          },
+          {
+            name: '大不列颠联合王国',
+            value: res.ll_yh_english[0].tvalue
+          },
+          {
+            name: '印度',
+            value: res.ll_yh_india[0].tvalue
+          },
+          {
+            name: '日本',
+            value: res.ll_yh_japan[0].tvalue
+          },
+          {
+            name: '新西兰',
+            value: res.ll_yh_newzealand[0].tvalue
+          },
+          {
+            name: '俄罗斯',
+            value: res.ll_yh_russia[0].tvalue
+          },
+          {
+            name: '瑞士',
+            value: res.ll_yh_switzerland[0].tvalue
+          },
+          {
+            name: '美国',
+            value: res.ll_yh_usa[0].tvalue
           }
-        })
-      },
-      // 生成世界地图
-      async renderMap() {
-        // 利率全部表id和name
-        const param = [
-          {tableId: 2, tableName: 'll_yh_usa'},
-          {tableId: 3, tableName: 'll_yh_euro'},
-          {tableId: 4, tableName: 'll_yh_newzealand'},
-          {tableId: 5, tableName: 'll_yh_china'},
-          {tableId: 6, tableName: 'll_yh_switzerland'},
-          {tableId: 7, tableName: 'll_yh_english'},
-          {tableId: 8, tableName: 'll_yh_australia'},
-          {tableId: 9, tableName: 'll_yh_japan'},
-          {tableId: 10, tableName: 'll_yh_russia'},
-          {tableId: 11, tableName: 'll_yh_india'},
-          {tableId: 12, tableName: 'll_yh_brazil'}
         ]
-        this.$post(this.api.multipleTablePreview, param).then(res => {
-          // 每个国家的央行利率，因为国家名称无法直接取数据库里的，所以这里固定好
-          const data = [
-            {
-              name: '澳大利亚',
-              value: res.ll_yh_australia[0].tvalue
-            },
-            {
-              name: '巴西',
-              value: res.ll_yh_brazil[0].tvalue
-            },
-            {
-              name: '中国',
-              value: res.ll_yh_china[1].tvalue
-            },
-            {
-              name: '大不列颠联合王国',
-              value: res.ll_yh_english[0].tvalue
-            },
-            {
-              name: '印度',
-              value: res.ll_yh_india[0].tvalue
-            },
-            {
-              name: '日本',
-              value: res.ll_yh_japan[0].tvalue
-            },
-            {
-              name: '新西兰',
-              value: res.ll_yh_newzealand[0].tvalue
-            },
-            {
-              name: '俄罗斯',
-              value: res.ll_yh_russia[0].tvalue
-            },
-            {
-              name: '瑞士',
-              value: res.ll_yh_switzerland[0].tvalue
-            },
-            {
-              name: '美国',
-              value: res.ll_yh_usa[0].tvalue
+        const chart = echarts.init(document.querySelector(`#chart7`))
+        chart.setOption({
+          // 提示框组件
+          tooltip: {
+            trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
+            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
+            // 使用函数模板  传入的数据值 -> value: number | Array
+            formatter: function (val) {
+              const { data } = val
+              return data ? (data.name + '利率: ' + data.value + '%') : ''
             }
-          ]
-          const chart = echarts.init(document.querySelector(`#chart7`))
-          chart.setOption({
-            // 提示框组件
-            tooltip: {
-              trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
-              // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
-              // 使用函数模板  传入的数据值 -> value: number | Array
-              formatter: function (val) {
-                const { data } = val
-                return data ? (data.name + '利率: ' + data.value + '%') : ''
-              }
+          },
+          // 视觉映射组件
+          visualMap: {
+            type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
+            show: false, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
+            // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
+            // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
+            min: 0,
+            max: 1000000,
+            // 文本样式
+            textStyle: {
+              fontSize: 14,
+              color: '#fff'
             },
-            // 视觉映射组件
-            visualMap: {
-              type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
-              show: false, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
-              // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
-              // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
-              min: 0,
-              max: 1000000,
-              // 文本样式
-              textStyle: {
-                fontSize: 14,
-                color: '#fff'
+            realtime: false, // 拖拽时，是否实时更新
+            // 定义 在选中范围中 的视觉元素
+            inRange: {
+              color: ['rgba(96, 82, 255, 1)', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 图元的颜色
+            }
+          },
+          series: [
+            {
+              type: 'map', // 类型
+              // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
+              name: '世界地图',
+              mapType: 'world', // 地图类型
+              // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
+              roam: true,
+              // 图形上的文本标签
+              label: {
+                show: false // 是否显示对应地名
               },
-              realtime: false, // 拖拽时，是否实时更新
-              // 定义 在选中范围中 的视觉元素
-              inRange: {
-                color: ['rgba(96, 82, 255, 1)', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 图元的颜色
-              }
-            },
-            series: [
-              {
-                type: 'map', // 类型
-                // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
-                name: '世界地图',
-                mapType: 'world', // 地图类型
-                // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
-                roam: true,
-                // 图形上的文本标签
+              // 地图区域的多边形 图形样式
+              itemStyle: {
+                areaColor: 'rgba(78, 130, 255, 1)', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
+                borderWidth: 0.5, // 描边线宽 为 0 时无描边
+                borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
+                borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
+              },
+              // 高亮状态下的多边形和标签样式
+              emphasis: {
                 label: {
-                  show: false // 是否显示对应地名
+                  show: true, // 是否显示标签
+                  color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                 },
-                // 地图区域的多边形 图形样式
                 itemStyle: {
-                  areaColor: 'rgba(78, 130, 255, 1)', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
-                  borderWidth: 0.5, // 描边线宽 为 0 时无描边
-                  borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
-                  borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
-                },
-                // 高亮状态下的多边形和标签样式
-                emphasis: {
-                  label: {
-                    show: true, // 是否显示标签
-                    color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
-                  },
-                  itemStyle: {
-                    areaColor: 'rgba(190, 77, 255, 1)' // 地图区域的颜色
-                  }
-                },
-                // 自定义地区的名称映射
-                nameMap: map.namemap,
-                // 地图系列中的数据内容数组 数组项可以为单个数值
-                data
-              }
-            ]
+                  areaColor: 'rgba(190, 77, 255, 1)' // 地图区域的颜色
+                }
+              },
+              // 自定义地区的名称映射
+              nameMap: map.namemap,
+              // 地图系列中的数据内容数组 数组项可以为单个数值
+              data
+            }
+          ]
+        })
+
+        let index = -1
+        setInterval(function () {
+          // 隐藏提示框
+          chart.dispatchAction({
+            type: 'hideTip',
+            seriesIndex: 0,
+            dataIndex: index
+          })
+          // 显示提示框
+          index < 9 && chart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: index + 1
+          })
+          // 取消高亮指定的数据图形
+          chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: index
           })
-        
-          let index = -1
-          setInterval(function () {
-            // 隐藏提示框
+          // 高亮指定的数据图形
+          index < 9 && chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: index + 1
+          })
+          index++
+          if (index > data.length - 1) {
             chart.dispatchAction({
               type: 'hideTip',
               seriesIndex: 0,
-              dataIndex: index
-            })
-            // 显示提示框
-            index < 9 && chart.dispatchAction({
-              type: 'showTip',
-              seriesIndex: 0,
-              dataIndex: index + 1
+              dataIndex: 9
             })
-            // 取消高亮指定的数据图形
             chart.dispatchAction({
               type: 'downplay',
               seriesIndex: 0,
-              dataIndex: index
-            })
-            // 高亮指定的数据图形
-            index < 9 && chart.dispatchAction({
-              type: 'highlight',
-              seriesIndex: 0,
-              dataIndex: index + 1
+              dataIndex: 9
             })
-            index++
-            if (index > data.length - 1) {
-              chart.dispatchAction({
-                type: 'hideTip',
-                seriesIndex: 0,
-                dataIndex: 9
-              })
-              chart.dispatchAction({
-                type: 'downplay',
-                seriesIndex: 0,
-                dataIndex: 9
-              })
-              index = -1
-            }
-          }, 2000)
-        }).catch(res => {})
-      },
-      // 表格滚动效果
-      scrollTable() {
-        const dom = this.$refs.tableWrap
-        const dom1 = this.$refs.gdpList
-        setInterval(() => {
-          dom.scrollTop += 1
-          if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
+            index = -1
+          }
+        }, 2000)
+      }).catch(res => { })
+    },
+    // 表格滚动效果
+    scrollTable () {
+      const dom = this.$refs.tableWrap
+      const dom1 = this.$refs.gdpList
+      setInterval(() => {
+        dom.scrollTop += 1
+        if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
 
-          dom1.scrollTop += 1
-          if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0
-        }, 30)
-      }
+        dom1.scrollTop += 1
+        if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0
+      }, 30)
     }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../../styles/page/screen.scss";
+@import '../../../styles/page/screen.scss';
 </style>
\ No newline at end of file
diff --git a/src/setting.js b/src/setting.js
index 4e3ce7c..578dd57 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -12,7 +12,7 @@ const dev = process.env.NODE_ENV === 'development' // 本地
 let host = `${location.origin}/`
 if (dev) {
   host = 'http://121.37.12.51/'
-  // host = 'http://192.168.31.51:9000/'
+  host = 'http://192.168.31.217:9000/'
 }
 
 const Setting = {