• uni-app：实现页面效果4（echarts数据可视化）

    效果

    代码

    1. <template>
    2. 	<view>
    3. 		<view>
    4. 			<view class="title">概况view>
    5. 			<view class="line_position">
    6. 				<view class="line1">
    7. 					<view class="item">
    8. 						<view class="one">今日销售额(万元)view>
    9. 						<view class="two">
    10. 							<view class="left">{{line1_info.daysale_allamount}}view>
    11. 							<view class="right">{{line1_info.daychangeRate}}view>
    12. 						view>
    13. 						<view class="three">
    14. 							<image :src="getImagePath(line1_info.daychangeRate)" alt="">image>
    15. 						view>
    16. 					view>
    17. 					<view class="item">
    18. 						<view class="one">本周销售额(万元)view>
    19. 						<view class="two">
    20. 							<view class="left">{{line1_info.weeksale_allamount}}view>
    21. 							<view class="right">{{line1_info.weekchangeRate}}view>
    22. 						view>
    23. 						<view class="three">
    24. 							<image :src="getImagePath(line1_info.weekchangeRate)" alt="">image>
    25. 						view>
    26. 					view>
    27. 					<view class="item">
    28. 						<view class="one">本月销售额(万元)view>
    29. 						<view class="two">
    30. 							<view class="left">{{line1_info.monthsale_allamount}}view>
    31. 							<view class="right">{{line1_info.monthchangeRate}}view>
    32. 						view>
    33. 						<view class="three">
    34. 							<image :src="getImagePath(line1_info.monthchangeRate)" alt="">image>
    35. 						view>
    36. 					view>
    37. 					<view class="item">
    38. 						<view class="one">今年销售额(万元)view>
    39. 						<view class="two">
    40. 							<view class="left">{{line1_info.yearsale_allamount}}view>
    41. 							<view class="right">{{line1_info.yearchangeRate}}view>
    42. 						view>
    43. 						<view class="three">
    44. 							<image :src="getImagePath(line1_info.yearchangeRate)" alt="">image>
    45. 						view>
    46. 					view>
    47. 				view>
    48. 			view>
    49. 		view>
    50. 		<view>
    51. 			<view class="title">销售额统计view>
    52. 			<view class="tab_position">
    53. 				<view class="tab-bar">
    54. 					<text class="tab" :class="{ 'active': activeTab === '0' }" @click="changeTab('0')">周统计text>
    55. 					<text class="tab" :class="{ 'active': activeTab === '1' }" @click="changeTab('1')">月统计text>
    56. 					<text class="tab" :class="{ 'active': activeTab === '2' }" @click="changeTab('2')">年统计text>
    57. 				view>
    58. 			view>
    59. 			<view v-show="activeTab === '0'">
    60. 				<view class="out">
    61. 					<view id="myChart">view>
    62. 				view>
    63. 			view>
    64. 			<view v-show="activeTab === '1'">
    65. 				<view class="out">
    66. 					<view id="myChart1">view>
    67. 				view>
    68. 			view>
    69. 			<view v-show="activeTab === '2'">
    70. 				<view class="out">
    71. 					<view id="myChart2">view>
    72. 				view>
    73. 			view>
    74. 		view>
    75.  
    76.  
    77.  
    78. 	view>
    79. template>
    80. <script>
    81. 	// import echarts from '@/static/js/echarts.js' // 引入文件
    82. 	import * as echarts from 'echarts';
    83. 	export default {
    84. 		data() {
    85. 			return {
    86. 				line1_info: '',
    87. 				down: getApp().globalData.icon + 'report/down.png',
    88. 				up: getApp().globalData.icon + 'report/up.png',
    89. 				line: getApp().globalData.icon + 'report/line.png',
    90. 				activeTab: '0', //默认分页面
    91. 				weekinfo: [], // 定义一个空数组用于存储周统计数据
    92. 				monthinfo: [], // 定义一个空数组用于存储月统计数据
    93. 			}
    94. 		},
    95. 		methods: {
    96. 			//切换分页面
    97. 			changeTab(index) {
    98. 				this.activeTab = index;
    99. 			},
    100. 			//图片展示
    101. 			getImagePath(rate) {
    102. 				if (rate === "无法计算") {
    103. 					return this.line;
    104. 				} else if (rate && rate.startsWith("-")) {
    105. 					return this.down;
    106. 				} else {
    107. 					return this.up;
    108. 				}
    109. 			},
    110. 			getdata() {
    111. 				uni.request({
    112. 					url: getApp().globalData.position + 'Other/select_sale_ekanbaninfo',
    113. 					data: {},
    114. 					header: {
    115. 						"Content-Type": "application/x-www-form-urlencoded"
    116. 					},
    117. 					method: 'POST',
    118. 					dataType: 'json',
    119. 					success: res => {
    120. 						//行1：年月日总额统计
    121. 						this.line1_info = res.data;
    122. 						//行2：周统计
    123. 						var weekinfo = res.data.week_info;
    124. 						this.weekinfo = weekinfo;
    125. 						//行2：月统计
    126. 						var monthinfo = res.data.month_info;
    127. 						this.monthinfo = monthinfo;
    128. 						//行2：年统计
    129. 						var yearinfo = res.data.year_info;
    130. 						this.yearinfo = yearinfo;
    131. 						console.log(this.yearinfo)
    132. 						//显示图表
    133. 						this.echart();
    134. 					},
    135. 					fail(res) {
    136. 						console.log("查询失败")
    137. 					}
    138. 				});
    139. 			},
    140. 			//绘制图标
    141. 			echart() {
    142. 				// 周统计金额
    143. 				const myChart = echarts.init(document.getElementById('myChart'))
    144. 				// 提取日期和对应的值
    145. 				var dates = this.weekinfo.date;
    146. 				var values = this.weekinfo.total_amount;
    147. 				var weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
    148. 				// 进行图表的配置和数据处理
    149. 				myChart.setOption({
    150. 					//配置网格组件，用于定义图表的位置和大小
    151. 					grid: {
    152. 						top: '15%', // 增加top的值来创建间距
    153. 						left: '2%',
    154. 						right: '2%',
    155. 						bottom: '2%', // 增加bottom的值来创建间距
    156. 						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
    157. 					},
    158. 					color: ['#e57b7b'],
    159. 					tooltip: {
    160. 						trigger: 'item',
    161. 						axisPointer: {
    162. 							type: 'line'
    163. 						},
    164. 						formatter: function(params) {
    165. 							var value = values[params.dataIndex];
    166. 							var date = dates[params.dataIndex];
    167. 							var week = weeks[params.dataIndex];
    168. 							var marker = params.marker; // 添加marker(小圆点)
    169. 							return marker + ' ' + date + '
      '       + week + ' : ' + value + '万元';
    170. 						}
    171. 					},
    172. 					xAxis: {
    173. 						// name: '日期',
    174. 						data: weeks,
    175. 						axisLine: {
    176. 							show: false // 隐藏纵坐标轴的横线
    177. 						},
    178. 						//隐藏小刻度短线
    179. 						axisTick: { // x轴刻度相关配置
    180. 							show: false, // 是否显示x轴刻度线
    181. 						},
    182. 						nameTextStyle: {
    183. 							fontSize: 12 // 设置横轴名称字体大小为12
    184. 						}
    185. 					},
    186. 					yAxis: {
    187. 						name: '金额(万元)',
    188. 						splitLine: {
    189. 							show: false // 隐藏纵坐标轴的背景横线
    190. 						},
    191. 						axisLine: {
    192. 							show: false // 隐藏纵坐标轴的竖线
    193. 						},
    194. 						//隐藏小刻度短线
    195. 						axisTick: { // x轴刻度相关配置
    196. 							show: false, // 是否显示x轴刻度线
    197. 						},
    198. 						axisLabel: {
    199. 							fontSize: 12 // 设置横轴标签字体大小为12
    200. 						},
    201. 						nameTextStyle: {
    202. 							fontSize: 12 // 设置横轴名称字体大小为12
    203. 						}
    204. 					},
    205. 					series: [{
    206. 						barWidth: '8',
    207. 						name: '销量',
    208. 						type: 'bar',
    209. 						data: values,
    210. 						itemStyle: {
    211. 							show: true,
    212. 							position: 'top',
    213. 							textStyle: {
    214. 								// color: '#515dc3',
    215. 								fontSize: 12
    216. 							}
    217. 						}
    218. 					}]
    219. 				});
    220. 				//月统计
    221. 				// 周统计金额
    222. 				const myChart1 = echarts.init(document.getElementById('myChart1'))
    223. 				// 提取日期和对应的值
    224. 				var dates1 = this.monthinfo.date;
    225. 				var values1 = this.monthinfo.total_amount;
    226. 				var months1 = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
    227. 				var months1_chinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    228. 				// 进行图表的配置和数据处理
    229. 				myChart1.setOption({
    230. 					//配置网格组件，用于定义图表的位置和大小
    231. 					grid: {
    232. 						top: '15%', // 增加top的值来创建间距
    233. 						left: '2%',
    234. 						right: '2%',
    235. 						bottom: '2%', // 增加bottom的值来创建间距
    236. 						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
    237. 					},
    238. 					color: ['#5588d4'],
    239. 					tooltip: {
    240. 						trigger: 'item',
    241. 						axisPointer: {
    242. 							type: 'line'
    243. 						},
    244. 						formatter: function(params) {
    245. 							var value = values1[params.dataIndex];
    246. 							var date = dates1[params.dataIndex];
    247. 							var month = months1_chinese[params.dataIndex];
    248. 							var marker = params.marker; // 添加marker(小圆点)
    249. 							return marker + ' ' + date + '
      '       + month + ' : ' + value + '万元';
    250. 						}
    251. 					},
    252. 					xAxis: {
    253. 						// name: '日期',
    254. 						data: months1,
    255. 						axisLine: {
    256. 							show: false // 隐藏纵坐标轴的横线
    257. 						},
    258. 						//隐藏小刻度短线
    259. 						axisTick: { // x轴刻度相关配置
    260. 							show: false, // 是否显示x轴刻度线
    261. 						},
    262. 						nameTextStyle: {
    263. 							fontSize: 12 // 设置横轴名称字体大小为12
    264. 						}
    265. 					},
    266. 					yAxis: {
    267. 						name: '金额(万元)',
    268. 						splitLine: {
    269. 							show: false // 隐藏纵坐标轴的背景横线
    270. 						},
    271. 						axisLine: {
    272. 							show: false // 隐藏纵坐标轴的竖线
    273. 						},
    274. 						//隐藏小刻度短线
    275. 						axisTick: { // x轴刻度相关配置
    276. 							show: false, // 是否显示x轴刻度线
    277. 						},
    278. 						axisLabel: {
    279. 							fontSize: 12 // 设置横轴标签字体大小为12
    280. 						},
    281. 						nameTextStyle: {
    282. 							fontSize: 12 // 设置横轴名称字体大小为12
    283. 						}
    284. 					},
    285. 					series: [{
    286. 						barWidth: '6',
    287. 						name: '销量',
    288. 						type: 'bar',
    289. 						data: values1,
    290. 						itemStyle: {
    291. 							show: true,
    292. 							position: 'top',
    293. 							textStyle: {
    294. 								// color: '#515dc3',
    295. 								fontSize: 12
    296. 							}
    297. 						}
    298. 					}]
    299. 				});
    300. 				//近五年年统计
    301. 				// 年统计金额
    302. 				const myChart2 = echarts.init(document.getElementById('myChart2'))
    303. 				// 提取日期和对应的值
    304. 				var dates2 = this.yearinfo.date;
    305. 				var values2 = this.yearinfo.total_amount;
    306. 				// 进行图表的配置和数据处理
    307. 				myChart2.setOption({
    308. 					//配置网格组件，用于定义图表的位置和大小
    309. 					grid: {
    310. 						top: '15%', // 增加top的值来创建间距
    311. 						left: '2%',
    312. 						right: '2%',
    313. 						bottom: '2%', // 增加bottom的值来创建间距
    314. 						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
    315. 					},
    316. 					color: ['#71aa77'],
    317. 					tooltip: {
    318. 						trigger: 'item',
    319. 						axisPointer: {
    320. 							type: 'line'
    321. 						},
    322. 						formatter: function(params) {
    323. 							var value = values2[params.dataIndex];
    324. 							var date = dates2[params.dataIndex];
    325. 							var marker = params.marker; // 添加marker(小圆点)
    326. 							return marker + ' ' + date + '年' + '
      '       + value + '万元';
    327. 						}
    328. 					},
    329. 					xAxis: {
    330. 						// name: '日期',
    331. 						data: dates2,
    332. 						axisLine: {
    333. 							show: false // 隐藏纵坐标轴的横线
    334. 						},
    335. 						//隐藏小刻度短线
    336. 						axisTick: { // x轴刻度相关配置
    337. 							show: false, // 是否显示x轴刻度线
    338. 						},
    339. 						nameTextStyle: {
    340. 							fontSize: 12 // 设置横轴名称字体大小为12
    341. 						}
    342. 					},
    343. 					yAxis: {
    344. 						name: '金额(万元)',
    345. 						splitLine: {
    346. 							show: false // 隐藏纵坐标轴的背景横线
    347. 						},
    348. 						axisLine: {
    349. 							show: false // 隐藏纵坐标轴的竖线
    350. 						},
    351. 						//隐藏小刻度短线
    352. 						axisTick: { // x轴刻度相关配置
    353. 							show: false, // 是否显示x轴刻度线
    354. 						},
    355. 						axisLabel: {
    356. 							fontSize: 12 // 设置横轴标签字体大小为12
    357. 						},
    358. 						nameTextStyle: {
    359. 							fontSize: 12 // 设置横轴名称字体大小为12
    360. 						}
    361. 					},
    362. 					series: [{
    363. 						barWidth: '8',
    364. 						name: '销量',
    365. 						type: 'bar',
    366. 						data: values2,
    367. 						itemStyle: {
    368. 							normal: {
    369. 								label: {
    370. 									show: true,
    371. 									position: 'top',
    372. 									textStyle: {
    373. 										// color: '#515dc3',
    374. 										fontSize: 12
    375. 									}
    376. 								}
    377. 							}
    378. 						}
    379. 					}]
    380. 				})
    381. 			},
    382. 		},
    383. 		onLoad() {
    384. 			this.getdata();
    385. 		},
    386. 	}
    387. script>
    388. <style lang="scss">
    389. 	//第一行内容
    390. 	.title {
    391. 		// border:1px solid black;
    392. 		padding-left: 2%;
    393. 		font-size: 105%;
    394. 	}
    395.  
    396. 	.line_position {
    397. 		overflow-x: scroll;
    398. 		scroll-behavior: smooth; // 设置滚动平滑过渡
    399.  
    400. 		//隐藏滚动条
    401. 		&::-webkit-scrollbar {
    402. 			width: 0; // 隐藏默认的滚动条 
    403. 			height: 0;
    404. 		}
    405.  
    406. 		&::-webkit-scrollbar-thumb {
    407. 			background-color: transparent; // 隐藏滚动条拖拽的小方块
    408. 		}
    409.  
    410. 		.line1 {
    411. 			width: 400%;
    412. 			display: flex;
    413.  
    414. 			// border:1px solid red;
    415. 			.item:nth-child(1) {
    416. 				background-color: #515dc3;
    417. 			}
    418.  
    419. 			.item:nth-child(2) {
    420. 				background-color: #ff9a3e;
    421. 			}
    422.  
    423. 			.item:nth-child(3) {
    424. 				background-color: #38bf80;
    425. 			}
    426.  
    427. 			.item:nth-child(4) {
    428. 				background-color: #fc5959;
    429. 			}
    430.  
    431. 			.item {
    432. 				width: 40%;
    433. 				margin: 1% 2%;
    434. 				border-radius: 5px;
    435. 				padding: 1% 1% 0 1%;
    436. 				// border:1px solid red;
    437. 				color: white;
    438.  
    439. 				.two {
    440. 					display: flex;
    441. 					margin: 5% 0;
    442. 					align-items: center;
    443.  
    444. 					// border:1px solid red;
    445. 					.left {
    446. 						width: 70%;
    447. 						font-size: 24px;
    448. 						// border:1px solid red;
    449. 					}
    450.  
    451. 					.right {
    452. 						text-align: right;
    453. 						width: 30%;
    454. 						// border:1px solid red;
    455. 					}
    456. 				}
    457.  
    458. 				.three {
    459. 					text-align: center;
    460.  
    461. 					// border:1px solid red;
    462. 					image {
    463. 						width: 60px;
    464. 						height: 50px;
    465. 					}
    466. 				}
    467. 			}
    468. 		}
    469. 	}
    470.  
    471. 	//第二行内容
    472. 	.tab_position {
    473. 		width: 100%;
    474. 		display: flex;
    475. 		justify-content: center;
    476. 	}
    477.  
    478. 	.tab-bar {
    479. 		display: flex;
    480. 		justify-content: space-between;
    481. 		width: 90%;
    482. 		// border: 1px solid black;
    483. 		background-color: #f2f2f2;
    484. 		border-radius: 15px;
    485. 		margin: 3% 1%;
    486. 	}
    487.  
    488. 	.tab {
    489. 		padding: 5px;
    490. 		font-size: 16px;
    491. 		cursor: pointer;
    492. 		// border: 1px solid black;
    493. 		width: 33%;
    494. 		text-align: center;
    495. 		// border-bottom: 1px solid #ccc;
    496. 	}
    497.  
    498. 	.active {
    499. 		color: white;
    500. 		background-color: #515dc3;
    501. 		border-radius: 15px;
    502. 		/* background-color:#74bfe7; */
    503. 		// border-bottom: 1px solid #74bfe7;
    504. 	}
    505.  
    506. 	//图标
    507. 	.out {
    508. 		width: 800rpx;
    509. 		// border:1px solid red;
    510. 		display: flex;
    511. 		justify-content: center;
    512. 	}
    513.  
    514. 	#myChart {
    515. 		width: 700rpx;
    516. 		height: 600rpx;
    517. 	}
    518.  
    519. 	#myChart1 {
    520. 		width: 700rpx;
    521. 		height: 600rpx;
    522. 	}
    523.  
    524. 	#myChart2 {
    525. 		width: 700rpx;
    526. 		height: 600rpx;
    527. 	}
    528. style>

    这样写会发现在手机端无法正常运

    现改用renderjs进行重写

    后端代码

    1.  //查询销售看板需要使用的数据
    2.     public function select_sale_ekanbaninfo(){
    3.         $yesterday = strtotime('-1 day', strtotime(date('Y-m-d')));//获得昨天的时间戳
    4.         $today = strtotime(date('Y-m-d')); // 获取当前日期的时间戳
    5.         $data['today'] = $today;
    6.         // 获取本周开始和结束时间戳
    7.         $thisWeekStart = strtotime('this week', $today);
    8.         $thisWeekEnd = strtotime('next week', $today) - 1;
    9.         // 获取上一周开始和结束时间戳
    10.         $lastWeekStart = strtotime('-1 week', $thisWeekStart);
    11.         $lastWeekEnd = strtotime('-1 week', $thisWeekEnd);
    12.         // 获取本月的开始和结束时间戳
    13.         $thisMonthStart = strtotime('first day of this month', $today);
    14.         $thisMonthEnd = strtotime('last day of this month', $today);
    15.         // 获取上一个月的开始和结束时间戳
    16.         $lastMonthStart = strtotime('first day of last month', $today);
    17.         $lastMonthEnd = strtotime('last day of last month', $today);
    18.         // 获取今年的开始和结束时间戳
    19.         $thisYearStart = strtotime('first day of January', $today);
    20.         $thisYearEnd = strtotime('last day of December', $today);
    21.         // 获取去年的开始和结束时间戳
    22.         $lastYearStart = strtotime('-1 year', $thisYearStart);
    23.         $lastYearEnd = strtotime('-1 year', $thisYearEnd);
    24.         
    25.         // $oneMonthAgo = strtotime('-1 month'); // 获取一个月前的时间戳
    26.         // $oneYearAgo = strtotime('-1 year'); // 获取一年前的时间戳
    27.         // 获取昨天的总金额
    28.         $data['yesterday_allamount'] = Db::table('so_headers_all')
    29.             ->where('creation_date', '>=', $yesterday)
    30.             ->where('creation_date', '<', $today)
    31.             ->sum('order_all_amount');
    32.         //当天的总金额
    33.         $data['daysale_allamount'] = Db::table('so_headers_all')
    34.             ->where('creation_date', '>=', $today) // 筛选 creation_date 大于等于今天的记录
    35.             ->sum('order_all_amount'); // 求和 order_all_amount 列的值
    36.         // 计算日涨幅比率
    37.         if ($data['yesterday_allamount'] == 0) {
    38.              $data['weekchangeRate'] = '无法计算'; 
    39.         }
    40.         else{
    41.             $data['daychangeRate'] = ($data['daysale_allamount'] - $data['yesterday_allamount']) / $data['yesterday_allamount'] * 100;
    42.             if ($data['daychangeRate'] >= 0) {
    43.                 $data['daychangeRate'] = '+' . number_format($data['daychangeRate'], 2) . '%';
    44.             } else {
    45.                 $data['daychangeRate'] = number_format($data['daychangeRate'], 2) . '%';
    46.             }
    47.         }
    48.         $data['daysale_allamount'] = number_format($data['daysale_allamount']/10000.0, 2); // 格式化结果保留两位小数
    49.         //近一周的总金额
    50.         // 获取本周的总金额
    51.         $data['weeksale_allamount'] = Db::table('so_headers_all')
    52.             ->where('creation_date', '>=', $thisWeekStart)
    53.             ->where('creation_date', '<=', $thisWeekEnd)
    54.             ->sum('order_all_amount');
    55.         // 获取上一周的总金额
    56.         $data['lastweeksale_allamount'] = Db::table('so_headers_all')
    57.             ->where('creation_date', '>=', $lastWeekStart)
    58.             ->where('creation_date', '<=', $lastWeekEnd)
    59.             ->sum('order_all_amount');
    60.         // 计算周涨幅比率
    61.         if ($data['lastweeksale_allamount'] == 0) {
    62.             $data['weekchangeRate'] = '无法计算';
    63.         } else {
    64.             $data['weekchangeRate'] = ($data['weeksale_allamount'] - $data['lastweeksale_allamount']) / $data['lastweeksale_allamount'] * 100;
    65.             if ($data['weekchangeRate'] >= 0) {
    66.                 $data['weekchangeRate'] = '+' . number_format($data['weekchangeRate'], 2) . '%';
    67.             } else {
    68.                 $data['weekchangeRate'] = number_format($data['weekchangeRate'], 2) . '%';
    69.             }
    70.             // $data['weekchangeRate'] = number_format(($data['weeksale_allamount'] - $data['lastweeksale_allamount']) / $data['lastweeksale_allamount'] * 100, 2) . '%';
    71.         }
    72.         $data['weeksale_allamount'] = number_format($data['weeksale_allamount']/10000.0, 2);
    73.         // 获取本月的总金额
    74.         $data['monthsale_allamount'] = Db::table('so_headers_all')
    75.             ->where('creation_date', '>=', $thisMonthStart)
    76.             ->where('creation_date', '<=', $thisMonthEnd)
    77.             ->sum('order_all_amount');
    78.         // 获取上一个月的总金额
    79.         $data['lastmonthsale_allamount'] = Db::table('so_headers_all')
    80.             ->where('creation_date', '>=', $lastMonthStart)
    81.             ->where('creation_date', '<=', $lastMonthEnd)
    82.             ->sum('order_all_amount');
    83.         // 计算月涨幅比率
    84.         if ($data['lastmonthsale_allamount'] == 0) {
    85.            $data['monthchangeRate'] = '无法计算';
    86.         } else {
    87.             $data['monthchangeRate'] = ($data['monthsale_allamount'] - $data['lastmonthsale_allamount']) / $data['lastmonthsale_allamount'] * 100;
    88.             if ($data['monthchangeRate'] >= 0) {
    89.                 $data['monthchangeRate'] = '+' . number_format($data['monthchangeRate'], 2) . '%';
    90.             } else {
    91.                 $data['monthchangeRate'] = number_format($data['monthchangeRate'], 2) . '%';
    92.             }
    93.             // $data['monthchangeRate'] = number_format(($data['monthsale_allamount'] - $data['lastmonthsale_allamount']) / $data['lastmonthsale_allamount'] * 100, 2) . '%';
    94.         }
    95.         $data['monthsale_allamount'] = number_format($data['monthsale_allamount']/10000.0, 2);
    96.         // 获取今年的总金额
    97.         $data['yearsale_allamount'] = Db::table('so_headers_all')
    98.             ->where('creation_date', '>=', $thisYearStart)
    99.             ->where('creation_date', '<=', $thisYearEnd)
    100.             ->sum('order_all_amount');
    101.         // 获取去年的总金额
    102.         $data['lastyearsale_allamount'] = Db::table('so_headers_all')
    103.             ->where('creation_date', '>=', $lastYearStart)
    104.             ->where('creation_date', '<=', $lastYearEnd)
    105.             ->sum('order_all_amount');
    106.         // 计算年涨幅
    107.         if ($data['lastyearsale_allamount'] == 0) {
    108.             $data['yearchangeRate'] = '无法计算';
    109.         } else {
    110.             $data['yearchangeRate'] = ($data['yearsale_allamount'] - $data['lastyearsale_allamount']) / $data['lastyearsale_allamount'] * 100;
    111.             if ($data['yearchangeRate'] >= 0) {
    112.                 $data['yearchangeRate'] = '+' . number_format($data['yearchangeRate'], 2) . '%';
    113.             } else {
    114.                 $data['yearchangeRate'] = number_format($data['yearchangeRate'], 2) . '%';
    115.             }
    116.             // $data['yearchangeRate'] = number_format(($data['yearsale_allamount'] - $data['lastyearsale_allamount']) / $data['lastyearsale_allamount'] * 100, 2) . '%';
    117.         }
    118.         $data['yearsale_allamount'] = number_format($data['yearsale_allamount']/10000.0, 2);
    119.         //查询本周每天的的总金额数
    120.         //获取本周的起始日期和结束日期
    121.         $weekStart = date('Y-m-d', strtotime('this week Monday'));
    122.         $weekEnd = date('Y-m-d', strtotime('this week Sunday'));
    123.         // 构造日期范围数组（从周一到周天）
    124.         $dateRange = [];
    125.         $currentDate = $weekStart;
    126.         while ($currentDate <= $weekEnd) {
    127.             $dateRange[] = $currentDate;
    128.             $currentDate = date('Y-m-d', strtotime($currentDate . ' +1 day'));
    129.         }
    130.         // 查询每天的总金额数
    131.         $result = Db::table('so_headers_all')
    132.             ->field("DATE_FORMAT(FROM_UNIXTIME(creation_date), '%Y-%m-%d') AS date, IFNULL(SUM(order_all_amount), 0) AS total_amount")
    133.             ->whereTime('creation_date', '>=', $weekStart)
    134.             ->whereTime('creation_date', '<=', $weekEnd)
    135.             ->group('date')
    136.             ->select();
    137.         //去掉逗号，转换为
    138.         foreach ($result as &$item) {
    139.             $item['total_amount'] = round(($item['total_amount'] / 10000),2);
    140.         }
    141.         // 构造最终结果数组
    142.         $dateArray = [];
    143.         $totalAmountArray = [];
    144.         foreach ($dateRange as $date) {
    145.             $found = false;
    146.             foreach ($result as $row) {
    147.                 if ($row['date'] == $date) {
    148.                     $dateArray[] = $row['date'];
    149.                     $totalAmountArray[] = $row['total_amount'];
    150.                     $found = true;
    151.                     break;
    152.                 }
    153.             }
    154.             if (!$found) {
    155.                 $weekdayIndex = date('w', strtotime($date));
    156.                 $dateArray[] = $date;
    157.                 $totalAmountArray[] = 0;
    158.             }
    159.         }
    160.         $data['week_info']['date'] = $dateArray;
    161.         $data['week_info']['total_amount'] = $totalAmountArray;
    162.         
    163.  
    164.         //查询今年中每月的总金额数据
    165.         // 获取当前年份
    166.         $year = date('Y');
    167.         $result1 = Db::table('so_headers_all')
    168.             ->field("DATE_FORMAT(FROM_UNIXTIME(creation_date), '%Y-%m') AS month, IFNULL(SUM(order_all_amount), 0) AS total_amount")
    169.             ->whereTime('creation_date', '>=', strtotime($year . '-01-01'))
    170.             ->whereTime('creation_date', '<=', strtotime($year . '-12-31'))
    171.             ->group('month')
    172.             ->select();
    173.         //去掉逗号，转换为
    174.         foreach ($result1 as &$item) {
    175.             $item['total_amount'] = round(($item['total_amount'] / 10000),2);
    176.         }
    177.         // 构造最终结果数组
    178.         $dateArray1 = [];
    179.         $totalAmountArray1 = [];
    180.         for ($i = 1; $i <= 12; $i++) {
    181.             //str_pad 函数用于在字符串的左侧（或右侧）填充指定字符，达到指定长度。这里，使用 str_pad 函数在 $i 左侧填充字符 '0'，直到 $i 的长度达到 2。
    182.             $month = str_pad($i, 2, '0', STR_PAD_LEFT);
    183.             $dateArray1[] = $year . '-' . $month;
    184.             $totalAmountArray1[$year . '-' . $month] = 0;
    185.         }
    186.         // 将查询结果填充到对应的月份位置
    187.         foreach ($result1 as $item) {
    188.             $totalAmountArray1[$item['month']] = $item['total_amount'];
    189.         }
    190.         // 最终结果数组
    191.         foreach ($dateArray1 as $date) {
    192.             $finalResult[] = [
    193.                 'date' => $date,
    194.                 'total_amount' => $totalAmountArray1[$date]
    195.             ];
    196.             $data['month_info']['date'][] = $date;
    197.             $data['month_info']['total_amount'][] = $totalAmountArray1[$date];
    198.         }
    199.  
    200.         //查询近五年总金额数据
    201.         // 获取当前年份
    202.         $currentYear = date('Y');
    203.         // 构造最终结果数组
    204.         $data['year_info']['date'] = [];
    205.         $data['year_info']['total_amount'] = [];
    206.         
    207.         for ($i = $currentYear - 5; $i <= $currentYear; $i++) {
    208.             $year = (string) $i;
    209.         
    210.             $result = Db::table('so_headers_all')
    211.                 ->field("IFNULL(SUM(order_all_amount), 0) AS total_amount")
    212.                 ->whereTime('creation_date', '>=', strtotime($year . '-01-01'))
    213.                 ->whereTime('creation_date', '<=', strtotime($year . '-12-31'))
    214.                 ->find();
    215.             $totalAmount = round(($result['total_amount'] / 10000), 2);
    216.             $data['year_info']['date'][] = $year;
    217.             $data['year_info']['total_amount'][] = $totalAmount;
    218.         }
    219.         echo json_encode($data);
    220.     }

    重写代码

    1. <template>
    2. 	<view>
    3. 		<view>
    4. 			<view class="title">概况view>
    5. 			<view class="line_position">
    6. 				<view class="line1">
    7. 					<view class="item">
    8. 						<view class="one">今日销售额(万元)view>
    9. 						<view class="two">
    10. 							<view class="left">{{line1_info.daysale_allamount}}view>
    11. 							<view class="right">{{line1_info.daychangeRate}}view>
    12. 						view>
    13. 						<view class="three">
    14. 							<image :src="getImagePath(line1_info.daychangeRate)" alt="">image>
    15. 						view>
    16. 					view>
    17. 					<view class="item">
    18. 						<view class="one">本周销售额(万元)view>
    19. 						<view class="two">
    20. 							<view class="left">{{line1_info.weeksale_allamount}}view>
    21. 							<view class="right">{{line1_info.weekchangeRate}}view>
    22. 						view>
    23. 						<view class="three">
    24. 							<image :src="getImagePath(line1_info.weekchangeRate)" alt="">image>
    25. 						view>
    26. 					view>
    27. 					<view class="item">
    28. 						<view class="one">本月销售额(万元)view>
    29. 						<view class="two">
    30. 							<view class="left">{{line1_info.monthsale_allamount}}view>
    31. 							<view class="right">{{line1_info.monthchangeRate}}view>
    32. 						view>
    33. 						<view class="three">
    34. 							<image :src="getImagePath(line1_info.monthchangeRate)" alt="">image>
    35. 						view>
    36. 					view>
    37. 					<view class="item">
    38. 						<view class="one">今年销售额(万元)view>
    39. 						<view class="two">
    40. 							<view class="left">{{line1_info.yearsale_allamount}}view>
    41. 							<view class="right">{{line1_info.yearchangeRate}}view>
    42. 						view>
    43. 						<view class="three">
    44. 							<image :src="getImagePath(line1_info.yearchangeRate)" alt="">image>
    45. 						view>
    46. 					view>
    47. 				view>
    48. 			view>
    49. 		view>
    50. 		<view>
    51. 			<view class="title">销售额统计view>
    52. 			<view class="tab_position">
    53. 				<view class="tab-bar">
    54. 					<text class="tab" :class="{ 'active': activeTab === '0' }" @click="changeTab('0')">周统计text>
    55. 					<text class="tab" :class="{ 'active': activeTab === '1' }" @click="changeTab('1')">月统计text>
    56. 					<text class="tab" :class="{ 'active': activeTab === '2' }" @click="changeTab('2')">年统计text>
    57. 				view>
    58. 			view>
    59. 			<view v-show="activeTab === '0'">
    60. 				<view class="out">
    61. 					<view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">view>
    62. 				view>
    63. 			view>
    64. 			<view v-show="activeTab === '1'">
    65. 				<view class="out">
    66. 					<view :prop="option1" :change:prop="echarts.updateEcharts1" id="echarts1" class="echarts">view>
    67. 				view>
    68. 			view>
    69. 			<view v-show="activeTab === '2'">
    70. 				<view class="out">
    71. 					<view :prop="option2" :change:prop="echarts.updateEcharts2" id="echarts2" class="echarts">view>
    72. 				view>
    73. 			view>
    74. 		view>
    75. 	view>
    76. template>
    77. <script>
    78. 	// import echarts from '@/static/js/echarts.js' // 引入文件
    79. 	import * as echarts from 'echarts';
    80. 	export default {
    81. 		data() {
    82. 			return {
    83. 				line1_info: '',
    84. 				down: getApp().globalData.icon + 'report/down.png',
    85. 				up: getApp().globalData.icon + 'report/up.png',
    86. 				line: getApp().globalData.icon + 'report/line.png',
    87. 				activeTab: '0', //默认分页面
    88. 				weekinfo: [], // 定义一个空数组用于存储周统计数据
    89. 				monthinfo: [], // 定义一个空数组用于存储月统计数据
    90. 				yearinfo: [], // 定义一个空数组用于存储年统计数据
    91. 				option: '',
    92. 				option1: '',
    93. 				option2: '',
    94. 			}
    95. 		},
    96. 		mounted() {
    97. 			this.getData(); // 在组件挂载后调用获取数据的方法
    98. 		},
    99. 		methods: {
    100. 			//切换分页面
    101. 			changeTab(index) {
    102. 				this.activeTab = index;
    103. 			},
    104. 			//图片展示
    105. 			getImagePath(rate) {
    106. 				if (rate === "无法计算") {
    107. 					return this.line;
    108. 				} else if (rate && rate.startsWith("-")) {
    109. 					return this.down;
    110. 				} else {
    111. 					return this.up;
    112. 				}
    113. 			},
    114. 			getData() {
    115. 				uni.request({
    116. 					url: getApp().globalData.position + 'Other/select_sale_ekanbaninfo',
    117. 					data: {},
    118. 					header: {
    119. 						"Content-Type": "application/x-www-form-urlencoded"
    120. 					},
    121. 					method: 'POST',
    122. 					dataType: 'json',
    123. 					success: res => {
    124. 						//行1：年月日总额统计
    125. 						this.line1_info = res.data;
    126. 						//行2：周统计
    127. 						var weekinfo = res.data.week_info;
    128. 						this.weekinfo = weekinfo;
    129. 						//行2：月统计
    130. 						var monthinfo = res.data.month_info;
    131. 						this.monthinfo = monthinfo;
    132. 						//行2：年统计
    133. 						var yearinfo = res.data.year_info;
    134. 						this.yearinfo = yearinfo;
    135. 						// console.log(this.yearinfo)
    136. 						//显示图表
    137. 						this.echart();
    138. 					},
    139. 					fail(res) {
    140. 						console.log("查询失败")
    141. 					}
    142. 				});
    143. 			},
    144. 			//绘制图标
    145. 			echart() {
    146. 				// 周统计金额
    147. 				// 提取日期和对应的值
    148. 				var dates = this.weekinfo.date;
    149. 				var values = this.weekinfo.total_amount;
    150. 				var weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
    151. 				// 进行图表的配置和数据处理
    152. 				this.option = {
    153. 					//配置网格组件，用于定义图表的位置和大小
    154. 					grid: {
    155. 						top: '15%', // 增加top的值来创建间距
    156. 						left: '2%',
    157. 						right: '2%',
    158. 						bottom: '2%', // 增加bottom的值来创建间距
    159. 						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
    160. 					},
    161. 					color: ['#e57b7b'],
    162. 					tooltip: {
    163. 						trigger: 'item',
    164. 						axisPointer: {
    165. 							type: 'line'
    166. 						},
    167. 						formatter: function(params) {
    168. 							var value = values[params.dataIndex];
    169. 							var date = dates[params.dataIndex];
    170. 							var week = weeks[params.dataIndex];
    171. 							var marker = params.marker; // 添加marker(小圆点)
    172. 							return marker + ' ' + date + '
      '       + week + ' : ' + value + '万元';
    173. 						}
    174. 					},
    175. 					xAxis: {
    176. 						// name: '日期',
    177. 						data: weeks,
    178. 						axisLine: {
    179. 							show: false // 隐藏纵坐标轴的横线
    180. 						},
    181. 						//隐藏小刻度短线
    182. 						axisTick: { // x轴刻度相关配置
    183. 							show: false, // 是否显示x轴刻度线
    184. 						},
    185. 						nameTextStyle: {
    186. 							fontSize: 12 // 设置横轴名称字体大小为12
    187. 						}
    188. 					},
    189. 					yAxis: {
    190. 						name: '金额(万元)',
    191. 						splitLine: {
    192. 							show: false // 隐藏纵坐标轴的背景横线
    193. 						},
    194. 						axisLine: {
    195. 							show: false // 隐藏纵坐标轴的竖线
    196. 						},
    197. 						//隐藏小刻度短线
    198. 						axisTick: { // x轴刻度相关配置
    199. 							show: false, // 是否显示x轴刻度线
    200. 						},
    201. 						axisLabel: {
    202. 							fontSize: 12 // 设置横轴标签字体大小为12
    203. 						},
    204. 						nameTextStyle: {
    205. 							fontSize: 12 // 设置横轴名称字体大小为12
    206. 						}
    207. 					},
    208. 					series: [{
    209. 						barWidth: '8',
    210. 						name: '销量',
    211. 						type: 'bar',
    212. 						data: values,
    213. 						itemStyle: {
    214. 							normal: {
    215. 								label: {
    216. 									show: true,
    217. 									position: 'top',
    218. 									textStyle: {
    219. 										// color: '#515dc3',
    220. 										fontSize: 12
    221. 									}
    222. 								}
    223. 							}
    224. 						}
    225. 					}]
    226. 				};
    227. 				//月统计
    228. 				// 月统计金额
    229. 				// 提取日期和对应的值
    230. 				var dates1 = this.monthinfo.date;
    231. 				var values1 = this.monthinfo.total_amount;
    232. 				var months1 = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
    233. 				var months1_chinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    234. 				// 进行图表的配置和数据处理
    235. 				this.option1 = {
    236. 					//配置网格组件，用于定义图表的位置和大小
    237. 					grid: {
    238. 						top: '15%', // 增加top的值来创建间距
    239. 						left: '2%',
    240. 						right: '2%',
    241. 						bottom: '2%', // 增加bottom的值来创建间距
    242. 						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
    243. 					},
    244. 					color: ['#5588d4'],
    245. 					tooltip: {
    246. 						trigger: 'item',
    247. 						axisPointer: {
    248. 							type: 'line'
    249. 						},
    250. 						formatter: function(params) {
    251. 							var value = values1[params.dataIndex];
    252. 							var date = dates1[params.dataIndex];
    253. 							var month = months1_chinese[params.dataIndex];
    254. 							var marker = params.marker; // 添加marker(小圆点)
    255. 							return marker + ' ' + date + '
      '       + month + ' : ' + value + '万元';
    256. 						}
    257. 					},
    258. 					xAxis: {
    259. 						// name: '日期',
    260. 						data: months1,
    261. 						axisLine: {
    262. 							show: false // 隐藏纵坐标轴的横线
    263. 						},
    264. 						//隐藏小刻度短线
    265. 						axisTick: { // x轴刻度相关配置
    266. 							show: false, // 是否显示x轴刻度线
    267. 						},
    268. 						nameTextStyle: {
    269. 							fontSize: 12 // 设置横轴名称字体大小为12
    270. 						}
    271. 					},
    272. 					yAxis: {
    273. 						name: '金额(万元)',
    274. 						splitLine: {
    275. 							show: false // 隐藏纵坐标轴的背景横线
    276. 						},
    277. 						axisLine: {
    278. 							show: false // 隐藏纵坐标轴的竖线
    279. 						},
    280. 						//隐藏小刻度短线
    281. 						axisTick: { // x轴刻度相关配置
    282. 							show: false, // 是否显示x轴刻度线
    283. 						},
    284. 						axisLabel: {
    285. 							fontSize: 12 // 设置横轴标签字体大小为12
    286. 						},
    287. 						nameTextStyle: {
    288. 							fontSize: 12 // 设置横轴名称字体大小为12
    289. 						}
    290. 					},
    291. 					series: [{
    292. 						barWidth: '6',
    293. 						name: '销量',
    294. 						type: 'bar',
    295. 						data: values1,
    296. 						itemStyle: {
    297. 							normal: {
    298. 								label: {
    299. 									show: true,
    300. 									position: 'top',
    301. 									textStyle: {
    302. 										// color: '#515dc3',
    303. 										fontSize: 12
    304. 									}
    305. 								}
    306. 							}
    307. 						}
    308. 					}]
    309. 				};
    310. 				//近五年年统计
    311. 				// 年统计金额
    312. 				// 提取日期和对应的值
    313. 				var dates2 = this.yearinfo.date;
    314. 				var values2 = this.yearinfo.total_amount;
    315. 				// 进行图表的配置和数据处理
    316. 				this.option2 = {
    317. 					//配置网格组件，用于定义图表的位置和大小
    318. 					grid: {
    319. 						top: '15%', // 增加top的值来创建间距
    320. 						left: '2%',
    321. 						right: '2%',
    322. 						bottom: '2%', // 增加bottom的值来创建间距
    323. 						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
    324. 					},
    325. 					color: ['#71aa77'],
    326. 					tooltip: {
    327. 						trigger: 'item',
    328. 						axisPointer: {
    329. 							type: 'line'
    330. 						},
    331. 						formatter: function(params) {
    332. 							var value = values2[params.dataIndex];
    333. 							var date = dates2[params.dataIndex];
    334. 							var marker = params.marker; // 添加marker(小圆点)
    335. 							return marker + ' ' + date + '年' + '
      '       + value + '万元';
    336. 						}
    337. 					},
    338. 					xAxis: {
    339. 						// name: '日期',
    340. 						data: dates2,
    341. 						axisLine: {
    342. 							show: false // 隐藏纵坐标轴的横线
    343. 						},
    344. 						//隐藏小刻度短线
    345. 						axisTick: { // x轴刻度相关配置
    346. 							show: false, // 是否显示x轴刻度线
    347. 						},
    348. 						nameTextStyle: {
    349. 							fontSize: 12 // 设置横轴名称字体大小为12
    350. 						}
    351. 					},
    352. 					yAxis: {
    353. 						name: '金额(万元)',
    354. 						splitLine: {
    355. 							show: false // 隐藏纵坐标轴的背景横线
    356. 						},
    357. 						axisLine: {
    358. 							show: false // 隐藏纵坐标轴的竖线
    359. 						},
    360. 						//隐藏小刻度短线
    361. 						axisTick: { // x轴刻度相关配置
    362. 							show: false, // 是否显示x轴刻度线
    363. 						},
    364. 						axisLabel: {
    365. 							fontSize: 12 // 设置横轴标签字体大小为12
    366. 						},
    367. 						nameTextStyle: {
    368. 							fontSize: 12 // 设置横轴名称字体大小为12
    369. 						}
    370. 					},
    371. 					series: [{
    372. 						barWidth: '8',
    373. 						name: '销量',
    374. 						type: 'bar',
    375. 						data: values2,
    376. 						itemStyle: {
    377. 							normal: {
    378. 								label: {
    379. 									show: true,
    380. 									position: 'top',
    381. 									textStyle: {
    382. 										// color: '#515dc3',
    383. 										fontSize: 12
    384. 									}
    385. 								}
    386. 							}
    387. 						}
    388. 					}]
    389. 				}
    390. 			},
    391. 		},
    392. 	}
    393. script>
    395. <script module="echarts" lang="renderjs">
    396. 	let myChart
    397. 	let myChart1
    398. 	let myChart2
    399. 	export default {
    400. 		mounted() {
    401. 			// 首先判断window.echarts是否存在，如果存在则调用initEcharts1方法进行初始化。
    402. 			if (typeof window.echarts === 'function') {
    403. 				this.initEcharts()
    404. 				this.initEcharts1()
    405. 				this.initEcharts2()
    406. 			} else {
    407. 				// 如果不存在，则动态创建一个