diff --git a/src/pages/screenShow/geoProducts.json b/src/pages/screenShow/geoProducts.json
new file mode 100644
index 0000000..717ecc2
--- /dev/null
+++ b/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"
+ }
+]
diff --git a/src/pages/screenShow/index.vue b/src/pages/screenShow/index.vue
index 4e75fbd..37ea5a0 100644
--- a/src/pages/screenShow/index.vue
+++ b/src/pages/screenShow/index.vue
@@ -8,7 +8,7 @@
@@ -103,8 +103,41 @@
alt="">
全国农产品地理标志产品登记数
-
+
+
+
+
+
+ | 省（区、市） |
+ 2016年 |
+ 2017年 |
+ 2018年 |
+ 2019年 |
+ 2020年 |
+ 2021年 |
+
+
+
+
+
+
+
+ | {{ item.province }} |
+ {{ item.year2016 }} |
+ {{ item.year2017 }} |
+ {{ item.year2018 }} |
+ {{ item.year2019 }} |
+ {{ item.year2020 }} |
+ {{ item.year2021 }} |
+
+
+
+
@@ -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)
}
}
diff --git a/src/router/permission.js b/src/router/permission.js
index 851672b..daee2fa 100644
--- a/src/router/permission.js
+++ b/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')