小程序隐藏滚动条，编写国民经济统计数据图表

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/album/album.wxss

@@ -1,4 +1,12 @@
 /* pages/album/album.wxss */
+/* 隐藏滚动条 */
+scroll-view ::-webkit-scrollbar {
+	display: none;
+	width: 0;
+	height: 0;
+	color: transparent;
+}
+
 /* 滑动 */
 .scroll-wrapper {
 	white-space: nowrap;
@@ -7,40 +15,40 @@
 	height: 90rpx;
 	padding: 0 32rpx;
 	box-sizing: border-box;
-  }
-  
-  /* 滑动块 */
-  .navigate-item {
+}
+
+/* 滑动块 */
+.navigate-item {
 	display: inline-block;
 	text-align: center;
 	height: 90rpx;
 	line-height: 90rpx;
 	margin: 0 30rpx;
-  }
-  
-  /* 滑动块 */
-  .names {
+}
+
+/* 滑动块 */
+.names {
 	font-size: 30rpx;
 	color: #333333;
 	font-weight: 500;
-  }
-  
-  /* 滑动块 */
-  .names.active {
+}
+
+/* 滑动块 */
+.names.active {
 	font-size: 30rpx;
 	color: #508FF4;
 	font-weight: 500;
-  }
-  
-  /* 滑动块 */
-  .currtline {
+}
+
+/* 滑动块 */
+.currtline {
 	margin: -8rpx auto 0 auto;
 	height: 8rpx;
 	border-radius: 4rpx;
-  }
-  
-  /* 滑动块 */
-  .currtline.active {
+}
+
+/* 滑动块 */
+.currtline.active {
 	background: #508FF4;
 	transition: all .3s;
-  }
+}

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/dataCenter/dataCenter.js

@@ -31,16 +31,16 @@ Page({
 			name: 'streetlinechart2'
 		}, {
 			title: '固定资产投资总额',
-			name: 'streetlinechart2'
+			name: 'streetlinechart3'
 		}, {
 			title: '商品房建设与销售',
-			name: 'streetlinechart2'
+			name: 'streetlinechart4'
 		}, {
 			title: '社会消费品零售总额',
-			name: 'streetlinechart2'
+			name: 'streetlinechart5'
 		}, {
 			title: '地方财政收支',
-			name: 'streetlinechart2'
+			name: 'streetlinechart6'
 		}],
 		// 本年办件数
 		officeNumber: [],
@@ -60,7 +60,8 @@ Page({
 	tabNav(e) {
 		let currentTab = e.currentTarget.dataset.index
 		this.setData({
-			currentTab
+			currentTab,
+			navScrollLeft: currentTab >= 1 ? (currentTab * 215) : 0
 		})
 	},
 	// 切换国民经济统计数据
@@ -72,7 +73,8 @@ Page({
 		if (source === 'autoplay' || source === 'touch') {
 			const currentTab = current
 			this.setData({
-				currentTab
+				currentTab,
+				navScrollLeft: currentTab >= 1 ? (currentTab * 215) : 0
 			})
 		}
 	},
@@ -81,13 +83,27 @@ Page({
 	 * 生命周期函数--监听页面加载
 	 */
 	onLoad(options) {
-		// 国民经济统计数据
+		// GDP地区生产总值
 		this.barComponent = this.selectComponent('#streetlinechart');
 		this.init_bar();
+		// 规模以上工业增加值
 		this.barComponent1 = this.selectComponent('#streetlinechart1');
 		this.init_bar1();
+		// 建筑业总产值
 		this.barComponent2 = this.selectComponent('#streetlinechart2');
 		this.init_bar2();
+		// 固定资产投资总额
+		this.barComponent3 = this.selectComponent('#streetlinechart3');
+		this.init_bar3();
+		// 商品房建设与销售
+		this.barComponent4 = this.selectComponent('#streetlinechart4');
+		this.init_bar4();
+		// 社会消费品零售总额
+		this.barComponent5 = this.selectComponent('#streetlinechart5');
+		this.init_bar5();
+		// 地方财政收支
+		this.barComponent6 = this.selectComponent('#streetlinechart6');
+		this.init_bar6();
 		// 好差评图表
 		this.goodOrBad = this.selectComponent('#goodOrBad');
 		this.init_goodOrBad();
@@ -104,6 +120,7 @@ Page({
 		this.publicMailbox = this.selectComponent('#publicMailbox');
 		this.init_publicMailbox();
 	},
+	// GDP地区生产总值
 	init_bar() {
 		this.barComponent.init((canvas, width, height, dpr) => {
 			// 初始化图表
@@ -113,10 +130,93 @@ Page({
 				devicePixelRatio: dpr
 			});
 			barChart.setOption(this.getScaOption());
+			wx.request({
+				url: 'https://www.cqna.gov.cn/data/natj/json/jdp.json',
+				success: function (res) {
+					let list = res.data.GDP;
+					let dateNum = [];
+					let alloneBasis = [];
+					for (let i = 0; i < list.length; i++) {
+						for (let j = 1; j <= list[i].totalNum.length; j++) {
+							let str = ' ';
+							if (j == 1) {
+								str = list[i].date + '年' + ' ' + '第1季度';
+								dateNum.push(str);
+							} else {
+								str = list[i].date + '年' + ' ' + '第1~' + j + '季度';
+								dateNum.push(str);
+							}
+						}
+						let alloneBasisList = list[i].alloneBasis;
+						for (var n = 0; n < alloneBasisList.length; n++) {
+							alloneBasis.push(alloneBasisList[n]);
+						}
+						barChart.setOption({
+							series: [{
+								data: alloneBasis
+							}],
+							xAxis: {
+								data: dateNum
+							}
+						})
+					}
+				}
+			})
 			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
 			return barChart;
 		});
 	},
+	// GDP地区生产总值
+	getScaOption() {
+		//请求数据 
+		var xAxis = {
+				type: 'category',
+				data: [],
+				axisLabel: {
+					rotate: 60
+				}
+			},
+			yAxis = {
+				type: 'value',
+				axisLabel: {
+					formatter: '{value}%'
+				}
+			},
+			grid = {
+				left: '10%',
+				bottom: '40%',
+				top: '15%'
+			},
+			legend = {
+				data: ['同比增长(%)']
+			},
+			series = [{
+				name: '同比增长(%)',
+				data: [],
+				type: 'line',
+				itemStyle: {
+					normal: {
+						color: '#FFA130',
+						label: {
+							show: true
+						}
+					}
+				}
+			}]
+		return {
+			backgroundColor: '#FFFFFF',
+			xAxis: xAxis,
+			yAxis: yAxis,
+			grid: grid,
+			legend: legend,
+			series: series,
+			animationDelay: function (idx) {
+				return idx * 50;
+			},
+			animationEasing: 'elasticOut'
+		};
+	},
+	// 规模以上工业增加值
 	init_bar1() {
 		this.barComponent1.init((canvas, width, height, dpr) => {
 			// 初始化图表
@@ -130,6 +230,67 @@ Page({
 			return barChart;
 		});
 	},
+	// 规模以上工业增加值
+	getScaOption1() {
+		//请求数据 
+		var xAxis = {
+				type: 'category',
+				data: [
+					'2018年第1季度',
+					'2018年第1~2季度',
+					'2018年第1~3季度',
+					'2018年第1~4季度',
+					'2019年第1季度',
+					'2018年第一季度',
+					'2018年第一季度'
+				],
+				axisLabel: {
+					rotate: 60
+				}
+			},
+			yAxis = {
+				type: 'value',
+				min: -10,
+				max: 20,
+				axisLabel: {
+					formatter: '{value}%'
+				}
+			},
+			grid = {
+				left: '10%',
+				bottom: '40%',
+				top: '15%'
+			},
+			legend = {
+				data: ['同比增长(%)']
+			},
+			series = [{
+				name: '同比增长(%)',
+				data: [8, -2, 15, 3, -7, 7, 8],
+				type: 'line',
+				itemStyle: {
+					normal: {
+						color: '#FFA130',
+						label: {
+							show: true
+						}
+					}
+				}
+			}]
+		return {
+			backgroundColor: '#FFFFFF',
+			xAxis: xAxis,
+			yAxis: yAxis,
+			grid: grid,
+			legend: legend,
+			series: series,
+			animationDelay: function (idx) {
+				return idx * 50;
+			},
+			animationEasing: 'elasticOut'
+		};
+	},
+	// 建筑业总产值
 	init_bar2() {
 		this.barComponent2.init((canvas, width, height, dpr) => {
 			// 初始化图表
@@ -143,121 +304,156 @@ Page({
 			return barChart;
 		});
 	},
-	// 好差评图表
-	init_goodOrBad() {
-		this.goodOrBad.init((canvas, width, height, dpr) => {
+	// 建筑业总产值
+	getScaOption2() {
+		//请求数据 
+		var xAxis = {
+				type: 'category',
+				data: [
+					'2018年第1季度',
+					'2018年第1~2季度',
+					'2018年第1~3季度',
+					'2018年第1~4季度',
+					'2019年第1季度',
+					'2018年第一季度',
+					'2018年第一季度'
+				],
+				axisLabel: {
+					rotate: 60
+				}
+			},
+			yAxis = {
+				type: 'value',
+				min: -10,
+				max: 20,
+				axisLabel: {
+					formatter: '{value}%'
+				}
+			},
+			grid = {
+				left: '10%',
+				bottom: '40%',
+				top: '15%'
+			},
+			legend = {
+				data: ['同比增长(%)']
+			},
+			series = [{
+				name: '同比增长(%)',
+				data: [-8, 8, -5, 13, 17, -7, 8],
+				type: 'line',
+				itemStyle: {
+					normal: {
+						color: '#FFA130',
+						label: {
+							show: true
+						}
+					}
+				}
+			}]
+		return {
+			backgroundColor: '#FFFFFF',
+			xAxis: xAxis,
+			yAxis: yAxis,
+			grid: grid,
+			legend: legend,
+			series: series,
+			animationDelay: function (idx) {
+				return idx * 50;
+			},
+			animationEasing: 'elasticOut'
+		};
+	},
+	// 固定资产投资总额
+	init_bar3() {
+		this.barComponent3.init((canvas, width, height, dpr) => {
 			// 初始化图表
 			const barChart = echarts.init(canvas, null, {
 				width: width,
 				height: height,
 				devicePixelRatio: dpr
 			});
-			barChart.setOption(this.getGoodOrBadOption());
-			request({
-				url: '/goodOrbad/getGoodOrBadByYearAndArea?area=1',
-				method: 'GET'
-			}).then(res => {
-				if (res.result === 'ok') {
-					let temp = [];
-					temp.push(res.data.veryDissatisfied);
-					temp.push(res.data.notSatisfied);
-					temp.push(res.data.basicSatisfied);
-					temp.push(res.data.satisfied);
-					temp.push(res.data.great);
-					this.setData({
-						evalutionNum: res.data.goodOrBad,
-						evalutionRate: Math.round(res.data.good / res.data.goodOrBad * 100)
-					})
-					barChart.setOption({
-						series: [{
-							data: temp
-						}]
-					})
-				}
-			})
+			barChart.setOption(this.getScaOption3());
 			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
 			return barChart;
 		});
 	},
-	// 近90天办理类别统计
-	init_processingCategory() {
-		this.processingCategory.init((canvas, width, height, dpr) => {
-			// 初始化图表
-			const barChart = echarts.init(canvas, null, {
-				width: width,
-				height: height,
-				devicePixelRatio: dpr
-			});
-			barChart.setOption(this.getStatisticsOption());
-			request({
-				url: '/mail/queryToType?type=3',
-				method: 'GET'
-			}).then(res => {
-				if (res.result) {
-					barChart.setOption({
-						series: [{
-							data: res.data
-						}],
-						legend: {
-							formatter: function (name) {
-								let data = res.data
-								let tarValue
-								for (let i = 0; i < data.length; i++) {
-									if (data[i].name == name) {
-										tarValue = data[i].value
-									}
-								}
-								let v = tarValue + '件'
-								return `${name}  ${v}`
-							}
+	// 固定资产投资总额
+	getScaOption3() {
+		//请求数据 
+		var xAxis = {
+				type: 'category',
+				data: [
+					'2018年第1季度',
+					'2018年第1~2季度',
+					'2018年第1~3季度',
+					'2018年第1~4季度',
+					'2019年第1季度',
+					'2018年第一季度',
+					'2018年第一季度'
+				],
+				axisLabel: {
+					rotate: 60
+				}
+			},
+			yAxis = {
+				type: 'value',
+				min: -10,
+				max: 20,
+				axisLabel: {
+					formatter: '{value}%'
+				}
+			},
+			grid = {
+				left: '10%',
+				bottom: '40%',
+				top: '15%'
+			},
+			legend = {
+				data: ['同比增长(%)']
+			},
+			series = [{
+				name: '同比增长(%)',
+				data: [-8, 8, -5, 13, 17, -7, 8],
+				type: 'line',
+				itemStyle: {
+					normal: {
+						color: '#FFA130',
+						label: {
+							show: true
 						}
-					})
+					}
 				}
-			})
-			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
-			return barChart;
-		});
+			}]
+		return {
+			backgroundColor: '#FFFFFF',
+			xAxis: xAxis,
+			yAxis: yAxis,
+			grid: grid,
+			legend: legend,
+			series: series,
+			animationDelay: function (idx) {
+				return idx * 50;
+			},
+			animationEasing: 'elasticOut'
+		};
 	},
-	// 近90天公开信箱领域统计
-	init_publicMailbox() {
-		this.publicMailbox.init((canvas, width, height, dpr) => {
+	// 商品房建设与销售
+	init_bar4() {
+		this.barComponent4.init((canvas, width, height, dpr) => {
 			// 初始化图表
 			const barChart = echarts.init(canvas, null, {
 				width: width,
 				height: height,
 				devicePixelRatio: dpr
 			});
-			barChart.setOption(this.getStatisticsOption());
-			request({
-				url: '/mail/queryToType?type=2',
-				method: 'GET'
-			}).then(res => {
-				if (res.result) {
-					barChart.setOption({
-						series: [{
-							data: res.data
-						}],
-						legend: {
-							formatter: function (name) {
-								let data = res.data
-								let tarValue
-								for (let i = 0; i < data.length; i++) {
-									if (data[i].name == name) {
-										tarValue = data[i].value
-									}
-								}
-								let v = tarValue + '件'
-								return `${name}  ${v}`
-							}
-						}
-					})
-				}
-			})
+			barChart.setOption(this.getScaOption4());
 			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
 			return barChart;
 		});
 	},
-	getScaOption() {
+	// 商品房建设与销售
+	getScaOption4() {
 		//请求数据 
 		var xAxis = {
 				type: 'category',
@@ -292,7 +488,7 @@ Page({
 			},
 			series = [{
 				name: '同比增长(%)',
-				data: [-4, 4, 5, 13, 17, -7, 8],
+				data: [-8, 8, -5, 13, 17, -7, 8],
 				type: 'line',
 				itemStyle: {
 					normal: {
@@ -316,7 +512,22 @@ Page({
 			animationEasing: 'elasticOut'
 		};
 	},
-	getScaOption1() {
+	// 社会消费品零售总额
+	init_bar5() {
+		this.barComponent5.init((canvas, width, height, dpr) => {
+			// 初始化图表
+			const barChart = echarts.init(canvas, null, {
+				width: width,
+				height: height,
+				devicePixelRatio: dpr
+			});
+			barChart.setOption(this.getScaOption5());
+			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
+			return barChart;
+		});
+	},
+	// 社会消费品零售总额
+	getScaOption5() {
 		//请求数据 
 		var xAxis = {
 				type: 'category',
@@ -351,7 +562,7 @@ Page({
 			},
 			series = [{
 				name: '同比增长(%)',
-				data: [8, -2, 15, 3, -7, 7, 8],
+				data: [-8, 8, -5, 13, 17, -7, 8],
 				type: 'line',
 				itemStyle: {
 					normal: {
@@ -375,7 +586,22 @@ Page({
 			animationEasing: 'elasticOut'
 		};
 	},
-	getScaOption2() {
+	// 地方财政收支
+	init_bar6() {
+		this.barComponent6.init((canvas, width, height, dpr) => {
+			// 初始化图表
+			const barChart = echarts.init(canvas, null, {
+				width: width,
+				height: height,
+				devicePixelRatio: dpr
+			});
+			barChart.setOption(this.getScaOption6());
+			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
+			return barChart;
+		});
+	},
+	// 地方财政收支
+	getScaOption6() {
 		//请求数据 
 		var xAxis = {
 				type: 'category',
@@ -434,6 +660,120 @@ Page({
 			animationEasing: 'elasticOut'
 		};
 	},
+	// 好差评图表
+	init_goodOrBad() {
+		this.goodOrBad.init((canvas, width, height, dpr) => {
+			// 初始化图表
+			const barChart = echarts.init(canvas, null, {
+				width: width,
+				height: height,
+				devicePixelRatio: dpr
+			});
+			barChart.setOption(this.getGoodOrBadOption());
+			request({
+				url: '/goodOrbad/getGoodOrBadByYearAndArea?area=1',
+				method: 'GET'
+			}).then(res => {
+				if (res.result === 'ok') {
+					let temp = [];
+					temp.push(res.data.veryDissatisfied);
+					temp.push(res.data.notSatisfied);
+					temp.push(res.data.basicSatisfied);
+					temp.push(res.data.satisfied);
+					temp.push(res.data.great);
+					this.setData({
+						evalutionNum: res.data.goodOrBad,
+						evalutionRate: Math.round(res.data.good / res.data.goodOrBad * 100)
+					})
+					barChart.setOption({
+						series: [{
+							data: temp
+						}]
+					})
+				}
+			})
+			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
+			return barChart;
+		});
+	},
+	// 近90天办理类别统计
+	init_processingCategory() {
+		this.processingCategory.init((canvas, width, height, dpr) => {
+			// 初始化图表
+			const barChart = echarts.init(canvas, null, {
+				width: width,
+				height: height,
+				devicePixelRatio: dpr
+			});
+			barChart.setOption(this.getStatisticsOption());
+			request({
+				url: '/mail/queryToType?type=3',
+				method: 'GET'
+			}).then(res => {
+				if (res.result) {
+					barChart.setOption({
+						series: [{
+							data: res.data
+						}],
+						legend: {
+							formatter: function (name) {
+								let data = res.data
+								let tarValue
+								for (let i = 0; i < data.length; i++) {
+									if (data[i].name == name) {
+										tarValue = data[i].value
+									}
+								}
+								let v = tarValue + '件'
+								return `${name}  ${v}`
+							}
+						}
+					})
+				}
+			})
+			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
+			return barChart;
+		});
+	},
+	// 近90天公开信箱领域统计
+	init_publicMailbox() {
+		this.publicMailbox.init((canvas, width, height, dpr) => {
+			// 初始化图表
+			const barChart = echarts.init(canvas, null, {
+				width: width,
+				height: height,
+				devicePixelRatio: dpr
+			});
+			barChart.setOption(this.getStatisticsOption());
+			request({
+				url: '/mail/queryToType?type=2',
+				method: 'GET'
+			}).then(res => {
+				if (res.result) {
+					barChart.setOption({
+						series: [{
+							data: res.data
+						}],
+						legend: {
+							formatter: function (name) {
+								let data = res.data
+								let tarValue
+								for (let i = 0; i < data.length; i++) {
+									if (data[i].name == name) {
+										tarValue = data[i].value
+									}
+								}
+								let v = tarValue + '件'
+								return `${name}  ${v}`
+							}
+						}
+					})
+				}
+			})
+			// 注意这里一定要返回 chart 实例，否则会影响事件处理等
+			return barChart;
+		});
+	},
 	// 获取好差评图表
 	getGoodOrBadOption() {
 		//请求数据 

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/dataCenter/dataCenter.wxml

@@ -10,7 +10,7 @@
 		</view>
 		<!-- 内容 -->
 		<view>
-			<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}">
+			<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 2 ? 0 : currentTab - 1}}">
 				<view class="navigate-item" id="item{{index}}" wx:for="{{statistics}}" wx:key="index" data-index="{{index}}" bindtap="tabNav">
 					<view class="names {{currentTab === index ? 'active' : ''}}">{{item.title}}</view>
 					<view class="currtline {{currentTab === index ? 'active' : ''}}" wx:if="{{currentTab === index}}"></view>

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/dataCenter/dataCenter.wxss

@@ -1,4 +1,11 @@
 /* pages/dataCenter/dataCenter.wxss */
+/* 隐藏滚动条 */
+scroll-view ::-webkit-scrollbar {
+	display:none;
+	width:0;
+	height:0;
+	color:transparent;
+}
 /* 整体 */
 .content {
   background-color: #F5F5F5;