fix

src/pages/screenShow/geoProducts.json

@@ -0,0 +1,83 @@
+[
+    {
+        "province": "北京市",
+        "year2016": "12",
+        "year2017": "13",
+        "year2018": "13",
+        "year2019": "13",
+        "year2020": "15",
+        "year2021": "15"
+    },
+    {
+        "province": "天津市",
+        "year2016": "7",
+        "year2017": "7",
+        "year2018": "8",
+        "year2019": "8",
+        "year2020": "9",
+        "year2021": "9"
+    },
+    {
+        "province": "河北省",
+        "year2016": "28",
+        "year2017": "32",
+        "year2018": "37",
+        "year2019": "42",
+        "year2020": "47",
+        "year2021": "55"
+    },
+    {
+        "province": "山西省",
+        "year2016": "108",
+        "year2017": "130",
+        "year2018": "143",
+        "year2019": "155",
+        "year2020": "161",
+        "year2021": "175"
+    },
+    {
+        "province": "内蒙古自治区",
+        "year2016": "82",
+        "year2017": "94",
+        "year2018": "107",
+        "year2019": "117",
+        "year2020": "127",
+        "year2021": "134"
+    },
+    {
+        "province": "辽宁省",
+        "year2016": "75",
+        "year2017": "82",
+        "year2018": "90",
+        "year2019": "95",
+        "year2020": "97",
+        "year2021": "100"
+    },
+    {
+        "province": "吉林省",
+        "year2016": "15",
+        "year2017": "15",
+        "year2018": "19",
+        "year2019": "23",
+        "year2020": "24",
+        "year2021": "25"
+    },
+    {
+        "province": "黑龙江省",
+        "year2016": "111",
+        "year2017": "120",
+        "year2018": "127",
+        "year2019": "140",
+        "year2020": "149",
+        "year2021": "168"
+    },
+    {
+        "province": "上海市",
+        "year2016": "13",
+        "year2017": "13",
+        "year2018": "14",
+        "year2019": "14",
+        "year2020": "15",
+        "year2021": "16"
+    }
+]

src/pages/screenShow/index.vue

@@ -8,7 +8,7 @@
     <!--header-->
     <div class="header">
       <div class="bg_header">
-        <div class="header_nav fl t_title">平台大数据可视化看板</div>
+        <div class="header_nav fl t_title">安农大数据可视化看板</div>
       </div>
     </div>
 
@@ -103,8 +103,41 @@
                  alt="">
             全国农产品地理标志产品登记数
           </div>
-          <div id="chart3"
-               class="chart t_btn9"></div>
+          <!-- <div id="chart3"
+               class="chart t_btn9"></div> -->
+          <div class="main_table">
+            <table>
+              <thead>
+                <tr>
+                  <th width="14%">省（区、市）</th>
+                  <th width="14%">2016年</th>
+                  <th width="14%">2017年</th>
+                  <th width="14%">2018年</th>
+                  <th width="14%">2019年</th>
+                  <th width="14%">2020年</th>
+                  <th width="14%">2021年</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+          <div class="main_table"
+               ref="geo"
+               style="max-height: 250px;margin-top: 0;overflow: hidden">
+            <table>
+              <tbody>
+                <tr v-for="(item, i) in list"
+                    :key="i">
+                  <td width="14%">{{ item.province }}</td>
+                  <td width="14%">{{ item.year2016 }}</td>
+                  <td width="14%">{{ item.year2017 }}</td>
+                  <td width="14%">{{ item.year2018 }}</td>
+                  <td width="14%">{{ item.year2019 }}</td>
+                  <td width="14%">{{ item.year2020 }}</td>
+                  <td width="14%">{{ item.year2021 }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
       <div class="middle">
@@ -258,10 +291,10 @@ import Util from '@/libs/util'
 import * as echarts from 'echarts'
 import Setting from '@/setting'
 import MapData from './mapData.json'
+import GeoProducts from './geoProducts.json'
 export default {
   data () {
     return {
-      token: Util.local.get(Setting.tokenKey),
       type1: 0,
       type2: 0,
       types: [
@@ -284,6 +317,7 @@ export default {
       examChart: null,
       timer1: null,
       timer2: null,
+      list: GeoProducts,
       provinces: ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '境外']
     }
   },
@@ -292,6 +326,7 @@ export default {
     this.renderChart2()
     this.getData()
     this.renderMap()
+    this.scrollTable()
   },
 
   methods: {
@@ -456,11 +491,11 @@ export default {
           },
         ]
       }
-      chart[3] = echarts.init(document.querySelector(`#chart3`))
-      chart[3].setOption(option3)
-      setInterval(function () {
-        animateChart(chart[3], option3, data3)
-      }, 1500)
+      // chart[3] = echarts.init(document.querySelector(`#chart3`))
+      // chart[3].setOption(option3)
+      // setInterval(function () {
+      //   animateChart(chart[3], option3, data3)
+      // }, 1500)
 
 
       const data5 = ['稻米', '小麦', '玉米', '生猪', '家禽', '水产', '中药材', '蔬菜', '茶叶', '林特']
@@ -967,15 +1002,15 @@ export default {
       const type = this.type2
       if (type) {
         series.push(
-          ['288', '135', '1348', '96', '378', '661', '329', '1301', '182', '1796', '1177', '1163', '502', '500', '2940', '386', '1331', '751', '626', '149', '20', '424', '910', '69', '455', '3', '199', '452', '81', '144', '245', '35'],
-          ['288', '176', '930', '147', '394', '740', '355', '1459', '234', '2159', '1276', '1406', '593', '527', '3370', '405', '1419', '824', '735', '171', '25', '637', '1029', '44', '512', '5', '204', '462', '97', '170', '327', '33'],
-          ['291', '188', '1084', '158', '443', '843', '447', '1738', '252', '2195', '1263', '1503', '657', '595', '3509', '544', '1541', '984', '740', '193', '28', '763', '1258', '24', '569', '9', '216', '611', '106', '202', '400', '32'],
-          ['309', '156', '783', '154', '494', '968', '545', '2072', '285', '1994', '1197', '1703', '575', '598', '3380', '572', '1591', '1030', '715', '196', '48', '772', '1251', '35', '740', '12', '224', '645', '211', '221', '548', '3'],
-          ['269', '156', '823', '171', '630', '992', '791', '2495', '271', '2027', '1182', '2237', '553', '581', '3330', '662', '1601', '1157', '575', '205', '68', '761', '1197', '52', '793', '35', '298', '759', '285', '240', '546', '4'],
-          ['289', '172', '986', '269', '947', '1040', '984', '2700', '534', '2464', '1356', '2960', '662', '645', '3667', '722', '1706', '1380', '597', '204', '103', '1214', '1281', '137', '1158', '36', '324', '1092', '404', '261', '604', '34'],
-          ['291', '144', '1015', '490', '1170', '927', '1056', '2748', '1135', '3296', '1469', '3421', '760', '653', '3898', '1019', '1786', '1798', '597', '246', '116', '1889', '1593', '262', '1753', '42', '321', '1292', '336', '277', '537', '8'],
-          ['232', '159', '1045', '896', '1447', '1015', '1101', '3108', '1578', '3708', '1574', '3849', '897', '942', '4083', '1367', '1937', '2528', '565', '493', '123', '2712', '1737', '377', '2065', '45', '370', '1539', '379', '264', '599', '5'],
-          ['297', '163', '1179', '1486', '1701', '1047', '1176', '3244', '1778', '5055', '2442', '3788', '1144', '1291', '4137', '2227', '2319', '3099', '682', '822', '88', '3239', '1984', '373', '2378', '65', '561', '1703', '547', '310', '736', '10'],
+          ['103', '84', '327', '51', '200', '254', '135', '450', '79', '729', '433', '420', '176', '192', '1360', '162', '526', '336', '259', '56', '8', '247', '456', '14', '173', '1', '104', '176', '42', '23', '92', '28'],
+          ['101', '78', '222', '72', '136', '306', '137', '601', '109', '988', '514', '628', '257', '249', '1397', '153', '603', '305', '324', '77', '12', '350', '429', '2', '224', '4', '62', '167', '40', '96', '181', '2'],
+          ['100', '31', '298', '35', '151', '373', '213', '825', '75', '628', '423', '535', '238', '208', '990', '272', '570', '428', '223', '64', '12', '192', '506', '19', '202', '4', '65', '281', '36', '87', '142', '2'],
+          ['122', '68', '343', '57', '237', '399', '219', '791', '128', '628', '376', '705', '173', '194', '1271', '177', '521', '410', '199', '66', '28', '269', '398', '16', '364', '6', '112', '221', '135', '49', '248'],
+          ['85', '62', '299', '80', '268', '286', '379', '998', '82', '841', '466', '1049', '185', '231', '1250', '256', '640', '418', '188', '82', '28', '347', '402', '21', '262', '26', '128', '305', '118', '125', '184', '2'],
+          ['94', '44', '437', '134', '486', '423', '395', '1096', '356', '1014', '570', '1310', '320', '244', '1454', '333', '626', '622', '243', '68', '54', '610', '514', '106', '584', '4', '94', '589', '154', '90', '216', '32'],
+          ['127', '54', '352', '288', '457', '324', '328', '883', '715', '1568', '490', '1161', '310', '219', '1471', '476', '649', '818', '195', '113', '43', '976', '739', '136', '918', '12', '115', '454', '65', '73', '167', '3'],
+          ['43', '65', '356', '489', '600', '331', '426', '1299', '533', '1223', '620', '1465', '322', '525', '1584', '610', '778', '1159', '207', '323', '31', '1202', '616', '138', '618', '29', '171', '548', '167', '113', '272'],
+          ['151', '54', '585', '736', '732', '454', '461', '1305', '606', '2359', '1398', '1275', '561', '597', '1388', '1211', '1005', '1215', '349', '404', '29', '1133', '735', '118', '914', '25', '307', '741', '323', '133', '325', '9'],
         )
       } else {
         series.push(
@@ -1162,34 +1197,53 @@ export default {
     },
     // 渲染地图
     renderMap () {
+      const data = [
+        { name: '合肥市', value: 787.40 },
+        { name: '淮北市', value: 236.25 },
+        { name: '宿州市', value: 865.93 },
+        { name: '亳州市', value: 1225.56 },
+        { name: '蚌埠市', value: 765.68 },
+        { name: '阜阳市', value: 1007.61 },
+        { name: '淮南市', value: 482.81 },
+        { name: '滁州市', value: 871.85 },
+        { name: '六安市', value: 1232.31 },
+        { name: '马鞍山市', value: 288.30 },
+        { name: '芜湖市', value: 508.64 },
+        { name: '宣城市', value: 792.02 },
+        { name: '铜陵市', value: 142.32 },
+        { name: '池州市', value: 279.26 },
+        { name: '安庆市', value: 757.88 },
+        { name: '黄山市', value: 555.09 },
+      ]
       echarts.registerMap('AH', MapData);
       const option = {
-        visualMap: {
-          // min: 1111,
-          // max: 333332,
-          // left: '50%',
-          // bottom: 20,
-          symbolSize: 300,
-          realtime: false,
-          calculable: true,
-          inRange: {
-            color: ['#6395ed', '#f3a64b', '#6b5de9']
-          }
-        },
-        // geo: {
-        //   map: 'AH',
-        //   roam: false,
-        //   zoom: 1.1,
-        //   label: {
-        //     emphasis: {
-        //       show: false
-        //     }
-        //   },
-        //   itemStyle: {
-        //     borderColor: 'transparent',
-        //     areaColor: 'transparent'
+        // visualMap: {
+        //   show: false,
+        //   // min: 1111,
+        //   // max: 333332,
+        //   // left: '50%',
+        //   // bottom: 20,
+        //   // symbolSize: 300,
+        //   // realtime: false,
+        //   // calculable: true,
+        //   inRange: {
+        //     color: ['#6395ed', '#f3a64b', '#6b5de9']
         //   }
         // },
+        geo: {
+          map: 'AH',
+          roam: false,
+          zoom: 1.1,
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          itemStyle: {
+            borderColor: 'transparent',
+            areaColor: 'transparent'
+          }
+        },
         title: {
           text: '2021年绿色食品十大产业全产业链产值（亿元）	',
           top: 10,
@@ -1199,26 +1253,52 @@ export default {
           }
         },
         tooltip: {},
+
         series: [
           {
-            name: '广西地图',
+            name: '2021年绿色食品十大产业全产业链产值',
             type: 'map',
             top: 60,
             map: 'AH',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
             roam: true,
             zoom: 1.1,
+
             label: {
-              show: true
+              normal: {
+                show: true,
+                textStyle: {
+                  color: "#fff"
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  color: "#fff"
+                }
+              }
             },
             textStyle: {
               color: '#fff'
             },
-            // 地图区域的多边形 图形样式
             itemStyle: {
-              areaColor: 'rgba(78, 130, 255, 1)', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
-              borderWidth: 0.5, // 描边线宽 为 0 时无描边
-              borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
-              borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
+              normal: {
+                areaColor: "#1e78ff", //rgba设置透明度0
+                borderColor: "#ccc", //省份边框颜色
+                borderWidth: 1.5, //省份边框
+                color: "#fff",
+                opacity: '0.4'
+              },
+              emphasis: {
+                areaColor: "rgba(128, 128, 128, 0.4)",
+                borderColor: "#43d0d6",
+                color: "#fff"
+              }
+            },
+            select: {
+              itemStyle: {
+                color: "#fff",
+                areaColor: "#43d0d6"
+              }
             },
             // 高亮状态下的多边形和标签样式
             emphasis: {
@@ -1230,43 +1310,62 @@ export default {
                 areaColor: '#c5aff9' // 地图区域的颜色
               }
             },
-            data: [
-              { name: '合肥市', value: 787.40 },
-              { name: '淮北市', value: 236.25 },
-              { name: '宿州市', value: 865.93 },
-              { name: '亳州市', value: 1225.56 },
-              { name: '蚌埠市', value: 765.68 },
-              { name: '阜阳市', value: 1007.61 },
-              { name: '淮南市', value: 482.81 },
-              { name: '滁州市', value: 871.85 },
-              { name: '六安市', value: 1232.31 },
-              { name: '马鞍山市', value: 288.30 },
-              { name: '芜湖市', value: 508.64 },
-              { name: '宣城市', value: 792.02 },
-              { name: '铜陵市', value: 142.32 },
-              { name: '池州市', value: 279.26 },
-              { name: '安庆市', value: 757.88 },
-              { name: '黄山市', value: 555.09 },
-            ]
+            data
           },
         ]
       }
-      echarts.init(document.querySelector(`#chart4`)).setOption(option)
+      const chart = echarts.init(document.querySelector(`#chart4`))
+      chart.setOption(option)
+
+      let index = -1
+      const len = 15
+      setInterval(function () {
+        // 隐藏提示框
+        chart.dispatchAction({
+          type: 'hideTip',
+          seriesIndex: 0,
+          dataIndex: index
+        })
+        // 显示提示框
+        index < len && chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: index + 1
+        })
+        // 取消高亮指定的数据图形
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex: index
+        })
+        // 高亮指定的数据图形
+        index < len && chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: index + 1
+        })
+        index++
+        if (index > data.length - 1) {
+          chart.dispatchAction({
+            type: 'hideTip',
+            seriesIndex: 0,
+            dataIndex: len
+          })
+          chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: len
+          })
+          index = -1
+        }
+      }, 2000)
     },
     // 表格滚动效果
     scrollTable () {
-      const dom = this.$refs.popularCourses
-      const dom1 = this.$refs.ach
-      const dom2 = this.$refs.active
+      const dom = this.$refs.geo
       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
-
-        dom2.scrollTop += 1
-        if (dom2.clientHeight + dom2.scrollTop === dom2.scrollHeight) dom2.scrollTop = 0
       }, 30)
     }
   }

src/router/permission.js

@@ -4,7 +4,7 @@ import util from "@/libs/util";
 
 const whiteList = Setting.whiteList // 白名单
 router.beforeEach((to, from, next) => {
-    document.title = Setting.titleSuffix + '-' + to.meta.title
+    document.title = to.path === '/screenShow' ? '安农大数据可视化看板' : Setting.titleSuffix + '-' + to.meta.title
     const role = util.local.get(Setting.tokenKey);
     if (!role && !whiteList.includes(to.path)) {
         next('/login')