可视化添加世界地图

src/api/index.js

@@ -77,6 +77,7 @@ export default {
   isDownload:`/data/data/product/isDownload`,
   getTableTime:`/data/data/tableTime/getTableTime`,
   getLevel: `/data/category/getLevel`,
+  multipleTablePreview: `/data/data/multipleTablePreview`,
 
   // 数据操作记录
   queryAccumulate:`/data/data/dataRecord/queryAccumulate`,

src/pages/screen/list/index.vue

@@ -177,7 +177,7 @@
                   <img src="@/assets/img/screen/t_3.png" alt="">
                   主要央行利率
               </div>
-              <div class="chart" id="chart7"></div>
+              <div class="chart" id="chart7" style="height: 500px"></div>
           </div>
       </div>
       <div class="right">
@@ -266,8 +266,10 @@
 <script>
 import Setting from '@/setting'
 import * as echarts from 'echarts'
+import 'echarts/map/js/world.js'
 import SockJS from 'sockjs-client'
 import Stomp from 'stompjs'
+import map from './map'
 export default {
     data() {
         return {
@@ -278,10 +280,9 @@ export default {
         }
     },
     mounted() {
-      // this.getCrypto()
       this.connect()
       this.renderChart()
-      // require('@/plugins/canvasBg') // 加载canvas背景js
+      this.renderMap()
     },
     methods: {
       // 获取加密货币实时行情
@@ -760,7 +761,7 @@ export default {
         }).catch(res => {})
 
         // 商品零售价格指数
-        this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => {
+        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => {
           const { data } = res
           const goodsSell = []
           data.map(e => {
@@ -770,7 +771,7 @@ export default {
               rcpi: e.rcpi
             })
           })
-          this.goodsSell = goodsSell
+          this.goodsSell = [...goodsSell, ...goodsSell]
         }).catch(res => {})
       
         // 新增信贷数据
@@ -1026,138 +1027,174 @@ export default {
           }, 1500)
         }).catch(res => {})
       
+        this.scrollTable()
 
-        // 全社会用电分类情况
+        // 监听resize事件，动态改变chart大小
-        this.$get(`${this.api.visualPreview}?tableName=hg_zg_jr_quanshehuiyongdianfenleiqingkuangbiao&tableId=50`).then(res => {
+        window.addEventListener('resize', () => {
-          const { comment, data } = res
+          for (let i = 0; i < 7; i++) {
-          const item = data[3]
+            chart[i] && chart[i].resize()
-          chart[6] = echarts.init(document.querySelector(`#chart7`))
-          chart[6].setOption({
-            title: [{
-              text: `2021年全社会用电分类情况`,
-              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%',
+      async renderMap() {
-              itemWidth: 10,
+        // 获取利率全部表id和name
-              itemHeight: 10,
+        const res = await this.$post(`${this.api.getIdQueryTable}?categoryId=19&pageNum=1&pageSize=20&updateTime=&showName=`)
-              data: ['第一产业用电量', '第二产业用电量', '第三产业用电量'],
+        const param = []
-              textStyle: {
+        res.pageList.records.map(e => {
-                color: 'rgba(255,255,255,.5)',
+          param.push({
-                fontSize: '12',
+            tableId: e.id,
-              }
+            tableName: e.name
+          })
+        })
+        this.$post(this.api.multipleTablePreview, param).then(res => {
+          // 每个国家的央行利率，因为国家名称无法直接取数据库里的，所以这里固定好
+          const data = [
+            {
+              name: '澳大利亚',
+              value: res.ll_yh_australia[0].tvalue
             },
-            series: [{
+            {
-              name: '全社会用电分类情况',
+              name: '巴西',
-              type: 'pie',
+              value: res.ll_yh_brazil[0].tvalue
-              center: ['50%', '55%'],
-              radius: ['40%', '60%'],
-              color: ['rgba(123, 54, 98, .8)', 'rgba(171, 21, 241, .8)', 'rgba(12, 164, 167, .8)'],
-              label: {
-                show: false
             },
-              labelLine: {
+            {
-                show: false
+              name: '中国',
+              value: res.ll_yh_china[1].tvalue
+            },
+            {
+              name: '英国',
+              value: res.ll_yh_english[0].tvalue
+            },
+            {
+              name: '欧洲',
+              value: res.ll_yh_euro[0].tvalue
+            },
+            {
+              name: '印度',
+              value: res.ll_yh_india[0].tvalue
+            },
+            {
+              name: '日本',
+              value: res.ll_yh_japan[0].tvalue
             },
-              data: [{
+            {
-                  value: item.ecipi,
+              name: '新西兰',
-                  name: '第一产业用电量'
+              value: res.ll_yh_newzealand[0].tvalue
+            },
+            {
+              name: '俄罗斯',
+              value: res.ll_yh_russia[0].tvalue
             },
             {
-                  value: item.ecitsi,
+              name: '瑞士',
-                  name: '第二产业用电量'
+              value: res.ll_yh_switzerland[0].tvalue
             },
             {
-                  value: item.ecitti,
+              name: '美国',
-                  name: '第三产业用电量'
+              value: res.ll_yh_usa[0].tvalue
             }
           ]
-            }]
+          const chart = echarts.init(document.querySelector(`#chart7`))
-          })
+          chart.setOption({
-        }).catch(res => {})
+            // 提示框组件
-
-        // 全社会客货运输量
-        this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanshehuikehuoyunshuliang&tableId=51`).then(res => {
-          const { comment, data } = res
-          if (!data.length) return false
-          chart[7] = echarts.init(document.querySelector(`#chart8`))
-          chart[7].setOption({
-            title: [{
-              text: `${data[0].operation_time.substr(0, 4)}年全社会客货运输量`,
-              top: '11%',
-              left: 'center',
-              textStyle: {
-                color: '#fff',
-                fontSize: '16'
-              }
-            }],
             tooltip: {
-              trigger: 'item',
+              trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
-              formatter: "{a} <br/>{b}: {c} ({d}%)",
+              // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
-              position: function(p) { //其中p为当前鼠标的位置
+              // 使用函数模板  传入的数据值 -> value: number | Array
-                return [p[0] + 10, p[1] - 10];
+              formatter: function (val) {
-              }
+                return val.data.name + '利率: ' + val.data.value + '%'
-            },
+              }
-            legend: {
+            },
-              top: '90%',
+            // 视觉映射组件
-              itemWidth: 10,
+            visualMap: {
-              itemHeight: 10,
+              type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
-              data: ['民航', '水运', '公路', '铁路'],
+              show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
+              // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
+              // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
+              min: 0,
+              max: 1000000,
+              // 文本样式
               textStyle: {
-                color: 'rgba(255,255,255,.5)',
+                fontSize: 14,
-                fontSize: '12',
+                color: '#fff'
+              },
+              realtime: false, // 拖拽时，是否实时更新
+              calculable: true, // 是否显示拖拽用的手柄
+              // 定义 在选中范围中 的视觉元素
+              inRange: {
+                color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 图元的颜色
               }
             },
-            series: [{
+            series: [
-              name: '全社会客货运输量',
+              {
-              type: 'pie',
+                type: 'map', // 类型
-              center: ['50%', '55%'],
+                // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
-              radius: ['40%', '60%'],
+                name: '世界地图',
-              color: ['#39e5e5', '#e74fd4', '#5e31e9', '#26aafb'],
+                mapType: 'world', // 地图类型
+                // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
+                roam: true,
+                // 图形上的文本标签
                 label: {
-                show: false
+                  show: false // 是否显示对应地名
                 },
-              labelLine: {
+                // 地图区域的多边形 图形样式
-                show: false
+                itemStyle: {
+                  areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
+                  borderWidth: 0.5, // 描边线宽 为 0 时无描边
+                  borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
+                  borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                 },
-              data: [{
+                // 高亮状态下的多边形和标签样式
-                  value: data[0].freight_turnover,
+                emphasis: {
-                  name: '民航'
+                  label: {
-                }, {
+                    show: true, // 是否显示标签
-                  value: data[1].freight_turnover,
+                    color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
-                  name: '水运'
+                  },
-                }, {
+                  itemStyle: {
-                  value: data[2].freight_turnover,
+                    areaColor: '#FF6347' // 地图区域的颜色
-                  name: '公路'
+                  }
-                }, {
+                },
-                  value: data[3].freight_turnover,
+                // 自定义地区的名称映射
-                  name: '铁路'
+                nameMap: map.namemap,
+                // 地图系列中的数据内容数组 数组项可以为单个数值
+                data
               }
             ]
-            }]
           })
-        }).catch(res => {})
-
-        this.scrollTable()
         
-        // 监听resize事件，动态改变chart大小
+          let index = -1
-        window.addEventListener('resize', () => {
+          setInterval(function () {
-          for (let i = 0; i < 8; i++) {
+            // 隐藏提示框
-            chart[i] && chart[i].resize()
+            chart.dispatchAction({
-          }
+              type: 'hideTip',
+              seriesIndex: 0,
+              dataIndex: index
             })
+            // 显示提示框
+            chart.dispatchAction({
+              type: 'showTip',
+              seriesIndex: 0,
+              dataIndex: index + 1
+            })
+            // 取消高亮指定的数据图形
+            chart.dispatchAction({
+              type: 'downplay',
+              seriesIndex: 0,
+              dataIndex: index
+            })
+            // 高亮指定的数据图形
+            chart.dispatchAction({
+              type: 'highlight',
+              seriesIndex: 0,
+              dataIndex: index + 1
+            })
+            index++
+            if (index > data.length - 1) {
+              index = -1
+            }
+          }, 2000)
+        }).catch(res => {})
       },
       // 表格滚动效果
       scrollTable() {

src/pages/screen/list/map.js

@@ -0,0 +1,193 @@
+export default {
+  "namemap": {
+    "Afghanistan": "阿富汗",
+    "Angola": "安哥拉",
+    "Albania": "阿尔巴尼亚",
+    "Algeria": "阿尔及利亚",
+    "Argentina": "阿根廷",
+    "Armenia": "亚美尼亚",
+    "Australia": "澳大利亚",
+    "Austria": "奥地利",
+    "Azerbaijan": "阿塞拜疆",
+    "Bahamas": "巴哈马",
+    "Bangladesh": "孟加拉国",
+    "Belgium": "比利时",
+    "Benin": "贝宁",
+    "Burkina Faso": "布基纳法索",
+    "Burundi": "布隆迪",
+    "Bulgaria": "保加利亚",
+    "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
+    "Belarus": "白俄罗斯",
+    "Belize": "伯利兹",
+    "Bermuda": "百慕大群岛",
+    "Bolivia": "玻利维亚",
+    "Brazil": "巴西",
+    "Brunei": "文莱",
+    "Bhutan": "不丹",
+    "Botswana": "博茨瓦纳",
+    "Cambodia": "柬埔寨",
+    "Cameroon": "喀麦隆",
+    "Canada": "加拿大",
+    "Central African Rep.": "中非共和国",
+    "Chad": "乍得",
+    "Chile": "智利",
+    "China": "中国",
+    "Colombia": "哥伦比亚",
+    "Congo": "刚果",
+    "Costa Rica": "哥斯达黎加",
+    "Côte d'Ivoire": "科特迪瓦",
+    "Croatia": "克罗地亚",
+    "Cuba": "古巴",
+    "Cyprus": "塞浦路斯",
+    "Czech Rep.": "捷克共和国",
+    "Dem. Rep. Korea": "韩国",
+    "Dem. Rep. Congo": "民主刚果",
+    "Denmark": "丹麦",
+    "Djibouti": "吉布提",
+    "Dominican Rep.": "多米尼加共和国",
+    "Ecuador": "厄瓜多尔",
+    "Egypt": "埃及",
+    "El Salvador": "萨尔瓦多",
+    "Eq. Guinea": "赤道几内亚",
+    "Eritrea": "厄立特里亚",
+    "Estonia": "爱沙尼亚",
+    "Ethiopia": "埃塞俄比亚",
+    "Falkland Is.": "福克兰群岛",
+    "Fiji": "斐济",
+    "Finland": "芬兰",
+    "France": "法国",
+    "French Guiana": "法属圭亚那",
+    "Fr. S. Antarctic Lands": "法属南部领地",
+    "Gabon": "加蓬",
+    "Gambia": "冈比亚",
+    "Germany": "德国",
+    "Georgia": "佐治亚州",
+    "Ghana": "加纳",
+    "Greece": "希腊",
+    "Greenland": "格陵兰",
+    "Guatemala": "危地马拉",
+    "Guinea": "几内亚",
+    "Guinea-Bissau": "几内亚比绍",
+    "Guyana": "圭亚那",
+    "Haiti": "海地",
+    "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
+    "Honduras": "洪都拉斯",
+    "Hungary": "匈牙利",
+    "Iceland": "冰岛",
+    "India": "印度",
+    "Indonesia": "印度尼西亚",
+    "Iran": "伊朗",
+    "Iraq": "伊拉克",
+    "Ireland": "爱尔兰",
+    "Israel": "以色列",
+    "Italy": "意大利",
+    "Ivory Coast": "象牙海岸",
+    "Jamaica": "牙买加",
+    "Japan": "日本",
+    "Jordan": "乔丹",
+    "Kashmir": "克什米尔",
+    "Kazakhstan": "哈萨克斯坦",
+    "Kenya": "肯尼亚",
+    "Kosovo": "科索沃",
+    "Kuwait": "科威特",
+    "Kyrgyzstan": "吉尔吉斯斯坦",
+    "Laos": "老挝",
+    "Lao PDR": "老挝人民民主共和国",
+    "Latvia": "拉脱维亚",
+    "Lebanon": "黎巴嫩",
+    "Lesotho": "莱索托",
+    "Liberia": "利比里亚",
+    "Libya": "利比亚",
+    "Lithuania": "立陶宛",
+    "Luxembourg": "卢森堡",
+    "Madagascar": "马达加斯加",
+    "Macedonia": "马其顿",
+    "Malawi": "马拉维",
+    "Malaysia": "马来西亚",
+    "Mali": "马里",
+    "Mauritania": "毛里塔尼亚",
+    "Mexico": "墨西哥",
+    "Moldova": "摩尔多瓦",
+    "Mongolia": "蒙古",
+    "Montenegro": "黑山",
+    "Morocco": "摩洛哥",
+    "Mozambique": "莫桑比克",
+    "Myanmar": "缅甸",
+    "Namibia": "纳米比亚",
+    "Netherlands": "荷兰",
+    "New Caledonia": "新喀里多尼亚",
+    "New Zealand": "新西兰",
+    "Nepal": "尼泊尔",
+    "Nicaragua": "尼加拉瓜",
+    "Niger": "尼日尔",
+    "Nigeria": "尼日利亚",
+    "Korea": "朝鲜",
+    "Northern Cyprus": "北塞浦路斯",
+    "Norway": "挪威",
+    "Oman": "阿曼",
+    "Pakistan": "巴基斯坦",
+    "Panama": "巴拿马",
+    "Papua New Guinea": "巴布亚新几内亚",
+    "Paraguay": "巴拉圭",
+    "Peru": "秘鲁",
+    "Republic of the Congo": "刚果共和国",
+    "Philippines": "菲律宾",
+    "Poland": "波兰",
+    "Portugal": "葡萄牙",
+    "Puerto Rico": "波多黎各",
+    "Qatar": "卡塔尔",
+    "Republic of Seychelles": "塞舌尔共和国",
+    "Republic of Singapore": "新加坡共和国",
+    "Romania": "罗马尼亚",
+    "Russia": "俄罗斯",
+    "Rwanda": "卢旺达",
+    "Samoa": "萨摩亚",
+    "Saudi Arabia": "沙特阿拉伯",
+    "Senegal": "塞内加尔",
+    "Serbia": "塞尔维亚",
+    "Sierra Leone": "塞拉利昂",
+    "Slovakia": "斯洛伐克",
+    "Slovenia": "斯洛文尼亚",
+    "Solomon Is.": "所罗门群岛",
+    "Somaliland": "索马里兰",
+    "Somalia": "索马里",
+    "South Africa": "南非",
+    "S. Geo. and S. Sandw. Is.": "南乔治亚和南桑德威奇群岛",
+    "S. Sudan": "南苏丹",
+    "Spain": "西班牙",
+    "Sri Lanka": "斯里兰卡",
+    "Sudan": "苏丹",
+    "Suriname": "苏里南",
+    "Swaziland": "斯威士兰",
+    "Sweden": "瑞典",
+    "Switzerland": "瑞士",
+    "Syria": "叙利亚",
+    "Tajikistan": "塔吉克斯坦",
+    "Tanzania": "坦桑尼亚",
+    "Thailand": "泰国",
+    "The Kingdom of Tonga": "汤加王国",
+    "Timor-Leste": "东帝汶",
+    "Togo": "多哥",
+    "Trinidad and Tobago": "特立尼达和多巴哥",
+    "Tunisia": "突尼斯",
+    "Turkey": "土耳其",
+    "Turkmenistan": "土库曼斯坦",
+    "Uganda": "乌干达",
+    "Ukraine": "乌克兰",
+    "United Arab Emirates": "阿拉伯联合酋长国",
+    "United Kingdom": "大不列颠联合王国",
+    "United Republic of Tanzania": "坦桑尼亚联合共和国",
+    "United States": "美国",
+    "United States of America": "美利坚合众国",
+    "Uruguay": "乌拉圭",
+    "Uzbekistan": "乌兹别克斯坦",
+    "Vanuatu": "瓦努阿图",
+    "Venezuela": "委内瑞拉",
+    "Vietnam": "越南",
+    "West Bank": "西岸",
+    "W. Sahara": "西撒哈拉",
+    "Yemen": "也门",
+    "Zambia": "赞比亚",
+    "Zimbabwe": "津巴布韦"
+  }
+}

src/setting.js

@@ -25,7 +25,7 @@ const Setting = {
      * 正式：http://www.dataforward.cn:9000
      * */
     // apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://39.108.250.202:9000',
-    apiBaseURL: env === 'development' ? 'http://39.108.250.202:9000' : `${location.origin}:9000`,
+    apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : `${location.origin}:9000`,
     // 加密货币接口地址
     cryptoBaseURL: `http://159.138.53.111/`,
     // 接口请求返回错误时，弹窗的持续时间，单位：秒