• vue柱状图+table表格

    2. <template>
    3. 	<el-container class="train-plan-index">
    4. 		<el-header>
    5. 			<el-row>
    6. 				<el-col :span="24">
    7. 					<el-form :inline="true" :model="form" :rules="rules" class="demo-form-inline" ref="form">
    8. 						<el-form-item label="统计类型" prop="timeSpan">
    9. 							<el-select v-model="form.timeSpan">
    10. 								<el-option v-for="item in timeSpanList" :key="item.value" :label="item.label" :value="item.value">el-option>
    11. 							el-select>
    12. 						el-form-item>
    13. 						<span v-if="form.timeSpan == 'year'" class="year-span">
    14. 							<el-form-item label="时间" prop="yearStart" style="width：50px">
    15. 								<el-date-picker v-model="form.yearStart" type="year" placeholder="选择年" value-format="yyyy" :clearable="false"> el-date-picker>
    16. 							el-form-item>
    17. 							<span style="margin-right: 10px">-span>
    18. 							<el-form-item prop="yearEnd">
    19. 								<el-date-picker v-model="form.yearEnd" type="year" placeholder="选择年" value-format="yyyy" :clearable="false"> el-date-picker>
    20. 							el-form-item>
    21. 						span>
    22. 						<el-form-item label="时间" prop="time" v-if="form.timeSpan == 'month'">
    23. 							<el-date-picker v-model="form.time" type="monthrange" range-separator="—" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM" :clearable="false">
    24. 							el-date-picker>
    25. 						el-form-item>
    26.  
    27. 						
    28.  
    29. 						<el-form-item>
    30. 							<el-button type="primary" @click="onQuery">查询el-button>
    31. 							<el-button  @click="resetForm">重置el-button>
    32. 						el-form-item>
    33. 					el-form>
    34. 				el-col>
    35. 			el-row>
    36. 		el-header>
    37.  
    38. 		<el-main class="stat-main">
    39. 			<div class="chart-div">
    40. 				
    41. 				<div class="stat-text-div">
    42. 					<el-form label-width="125px" class="demo-form">
    43. 						<el-row>
    44. 							<el-col :span="8">
    45. 								<el-form-item label="总培训次数">
    46. 									<el-input v-model="sumTrainCount" :disabled="true">el-input>
    47. 								el-form-item>
    48. 							el-col>
    49.  
    50. 							<el-col :span="8" :disable="true">
    51. 								<el-form-item label="总培训时长">
    52. 									<el-input v-model="sumTrainTime" :disabled="true">el-input>
    53. 								el-form-item>
    54. 							el-col>
    55. 						el-row>
    56. 					el-form>
    57. 				div>
    58. 				<div id="trainStatCharts" class="stat-chart-div">div>
    59. 			div>
    60. 			<div class="table-div">
    61. 				<el-table :data="tableData" border style="width: 100%" stripe height="calc(100% - 40px)" :default-sort="{ prop: 'saveTime', order: 'descending' }">
    62. 					<el-table-column type="index" label="序号" align="center" width="60" :index="(index) => this.$common.pageIndexMethod(index, form.pageIndex, form.pageSize)"> el-table-column>
    63. 					<el-table-column prop="trainId" label="培训编号" align="center" width="150"> el-table-column>
    64. 					<el-table-column prop="project" label="培训项目" align="center" width="150"> el-table-column>
    65. 					<el-table-column prop="applyCompany" label="申请单位" align="center" width="100"> el-table-column>
    66. 					<el-table-column prop="trainNumber" label="培训人数" align="center" width="80"> el-table-column>
    67. 					<el-table-column prop="startTime" label="培训开始时间" align="center" :formatter="onRenderTime"> el-table-column>
    68. 					<el-table-column prop="endTime" label="培训结束时间" align="center" :formatter="onRenderTime"> el-table-column>
    69. 					<el-table-column prop="isCert" label="是否为机构取证类" align="center" width="50"> el-table-column>
    70.  
    71. 					
    72. 				el-table>
    73. 				<Pagination :total="total" :page.sync="form.pageIndex" :limit.sync="form.pageSize" @pagination="onQuery" />
    74. 			div>
    75. 		el-main>
    76. 	el-container>
    77. template>
    78.  
    79. <script>
    80. import Pagination from '@/components/Pagination';
    81.  
    82. import { pageTrainProjByTime, listTrainCountAndTimesByTime } from '@/api/eams/trainStat.js';
    83.  
    84. export default {
    85. 	name: 'trainStat',
    86. 	components: { Pagination },
    87. 	data() {
    88. 		return {
    89. 			timeSpanList: [
    90. 				{
    91. 					value: 'year',
    92. 					label: '年',
    93. 				},
    94. 				{
    95. 					value: 'month',
    96. 					label: '月',
    97. 				},
    98. 			],
    99. 			form: {
    100. 				timeSpan: 'month',
    101. 				time: [],
    102. 				yearStart: this.$common.parseTime(new Date(), '{y}'),
    103. 				yearEnd: this.$common.parseTime(new Date(), '{y}'),
    104.  
    105. 				sortField: '', //排序字段
    106. 				sortOrder: '', //排序方向
    107. 				pageIndex: 0, //页数
    108. 				pageSize: 20, //每页数量
    109. 			},
    110. 			total: 0, //总数
    111. 			tableData: [],
    112. 			sumTrainTime: 0,
    113. 			sumTrainCount: 0,
    114.  
    115. 			myChart: null,
    116. 			xData: [], //横轴
    117. 			trainNumChart: [], //培训次数
    118. 			trainTimeChart: [],
    119.  
    120. 			//   校验
    121. 			rules: {
    122. 				startTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
    123. 				endTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
    124. 				yearStart: [{ required: true, message: '请选择开始年份', trigger: 'change' }],
    125. 				yearEnd: [{ required: true, message: '请选择结束年份', trigger: 'change' }],
    126. 			},
    127. 		};
    128. 	},
    129. 	mounted() {
    130. 		var startDefault = new Date().getFullYear() + '-' + '01';
    131. 		var endDefault = this.$common.parseTime(new Date(), '{y}-{m}');
    132. 		this.form.time = [startDefault, endDefault];
    133.  
    134. 		//查询
    135. 		this.myChart = this.$echarts.init(document.getElementById('trainStatCharts'));
    136. 		let self = this;
    137. 		this.myChart.on('click', function (params) {
    138. 			let param = self.getQueryCondition();
    139. 			param.startTime = params.name;
    140. 			param.endTime = params.name;
    141. 			self.pageTrainPlan(param);
    142. 		});
    143. 		this.onQuery();
    144. 	},
    145.  
    146. 	methods: {
    147. 		// 查询
    148. 		onQuery() {
    149. 			this.$refs.form.validate((valid) => {
    150. 				if (valid) {
    151. 					// if (param.time) {
    152. 					// 	param.startTime = this.$common.parseTime(param.time[0], '{y}-{m}-{d}') + ' 00:00:00';
    153. 					// 	param.endTime = this.$common.parseTime(param.time[1], '{y}-{m}-{d}') + ' 23:59:59';
    154. 					// }
    155. 					const param = this.getQueryCondition();
    156. 					this.pageTrainPlan(param);
    157.  
    158. 					//加载统计培训次数
    159. 					listTrainCountAndTimesByTime(param).then((res) => {
    160. 						var resData = res.data.data;
    161. 						this.sumTrainCount = 0;
    162. 						this.sumTrainTime = 0;
    163. 						this.xData = resData.map((item) => {
    164. 							return item.time;
    165. 						});
    166. 						this.trainNumChart = resData.map((item) => {
    167. 							return item.trainCount;
    168. 						});
    169. 						this.trainNumChart.map((item) => (this.sumTrainCount = this.sumTrainCount + item));
    170. 						this.trainTimeChart = resData.map((item) => {
    171. 							return item.trainTime;
    172. 						});
    173. 						this.trainTimeChart.map((item) => (this.sumTrainTime = this.sumTrainTime + item));
    174. 						this.onLoadChart();
    175. 					});
    176. 				}
    177. 			});
    178. 		},
    179.  
    180. 		pageTrainPlan(param) {
    181. 			pageTrainProjByTime(param).then((res) => {
    182. 				this.tableData = res.data.data ? res.data.data.data : [];
    183. 				this.total = res.data.data.total;
    184. 			});
    185. 		},
    186.  
    187. 		//查询条件
    188. 		getQueryCondition() {
    189. 			var param = { ...this.form };
    190. 			if (param.timeSpan == 'year') {
    191. 				param.startTime = param.yearStart;
    192. 				param.endTime = param.yearEnd;
    193. 			} else {
    194. 				param.startTime = param.time[0];
    195. 				param.endTime = param.time[1];
    196. 			}
    197.  
    198. 			return param;
    199. 		},
    200.  
    201. 		// 重置
    202. 		resetForm() {
    203. 			this.$refs.form.resetFields();
    204. 			this.onQuery();
    205. 		},
    206.  
    207. 		//表格排序
    208. 		onSortChanged(column) {
    209. 			var order = column.order;
    210. 			this.form.sortField = column.prop;
    211. 			this.form.sortOrder = order
    212. 				? order === 'descending' // 第一个问号：order不为空
    213. 					? 'desc'
    214. 					: 'asc'
    215. 				: '';
    216. 			this.onQuery();
    217. 		},
    218. 		//表格渲染时间
    219. 		onRenderTime(row, column, cellValue) {
    220. 			return this.$common.parseTime(cellValue, '{y}-{m}-{d}');
    221. 		},
    222.  
    223. 		//双击表格行
    224. 		onTableDblclick(row) {
    225. 			this.htmlFlag = 'look';
    226. 			this.selectedRow = row;
    227. 			this.dialogFormVisible = true;
    228. 		},
    229.  
    230. 		//加载柱状图
    231. 		onLoadChart() {
    232. 			//柱状图
    233. 			//柱状图
    234. 			var option = {
    235. 				tooltip: {
    236. 					trigger: 'axis',
    237. 				},
    238. 				grid: {
    239. 					left: '3%',
    240. 					right: '5%',
    241. 				},
    242. 				legend: {
    243. 					top: 10,
    244. 					data: ['培训次数', '培训时长'],
    245. 					textStyle: {
    246. 						//color: '#efefef',
    247. 					},
    248. 				},
    249. 				toolbox: {
    250. 					show: false,
    251. 					feature: {
    252. 						dataView: { show: false, readOnly: false },
    253. 						magicType: { show: true, type: ['line', 'bar'] },
    254. 						restore: { show: false },
    255. 						saveAsImage: { show: false },
    256. 					},
    257. 				},
    258. 				calculable: true,
    259. 				color: ['#59CE98', '#40B3C4', '#5E98EF', '#5640C4', '#BAB25E'],
    260. 				xAxis: [
    261. 					{
    262. 						type: 'category',
    263. 						// prettier-ignore
    264. 						data: this.xData,
    265. 						axisLabel: {
    266. 							//color: '#efefef',
    267. 							fontSize: '15px',
    268. 						},
    269. 					},
    270. 				],
    271. 				yAxis: [
    272. 					{
    273. 						type: 'value',
    274. 						axisLabel: {
    275. 							//color: '#efefef',
    276. 							fontSize: '15px',
    277. 						},
    278. 					},
    279. 				],
    280. 				series: [
    281. 					{
    282. 						name: '培训次数',
    283. 						type: 'bar',
    284. 						data: this.trainNumChart,
    285. 						label: {
    286. 							show: true,
    287. 							position: 'top',
    288. 							//color: '#efefef',
    289. 							fontSize: 14,
    290. 						},
    291. 					},
    292. 					{
    293. 						name: '培训时长',
    294. 						type: 'bar',
    295. 						data: this.trainTimeChart,
    296. 						label: {
    297. 							show: true,
    298. 							position: 'top',
    299. 							//color: '#efefef',
    300. 							fontSize: 14,
    301. 						},
    302. 					},
    303. 				],
    304. 			};
    305.  
    306. 			this.myChart.setOption(option);
    307. 		},
    308. 	},
    309. };
    310. script>
    311.  
    312. <style scoped>
    313. .train-plan-index .el-header {
    314. 	height: auto !important;
    315. }
    316.  
    317. .upload-plan {
    318. 	display: inline-block;
    319. 	margin: 0px 10px;
    320. }
    321.  
    322. .stat-main {
    323. 	display: flex;
    324. 	flex-direction: row;
    325. }
    326.  
    327. .chart-div {
    328. 	width: 50%;
    329. 	height: 100%;
    330. }
    331.  
    332. .stat-chart-div {
    333. 	width: 100%;
    334. 	height: calc(100% - 50px);
    335. }
    336.  
    337. .stat-text-div {
    338. 	width: 100%;
    339. 	height: 50px;
    340. }
    341.  
    342. .table-div {
    343. 	width: calc(50% - 10px);
    344. 	height: 100%;
    345. 	margin-left: 10px;
    346. }
    347.  
    348. .year-span {
    349. 	display: inline-block;
    350. 	line-height: 32px;
    351. }
    352.  
    353. .year-span >>> .el-date-editor.el-input {
    354. 	width: 100px;
    355. }
    356. style>
    357.  
    358.  
    359.  
    360.

  • 相关阅读:
    LVGL移植
    基于ubuntu20.04安装ros系统搭配使用工业相机
    力扣刷题之爬楼梯（7/30）
    spring-cloud-alibaba-Nacos2.0.3：注册中心和配置中心框架学习
    前端er须知的Nginx技巧
    基于QT的指挥猫猫打架玩耍的小游戏设计
    【C语言期末不挂科——指针篇1】
    axios的封装
    Win10 桌面图标出现空文件夹的删除及桌面图标排列问题
    5.2.SpringBoot整合Kafka
  • 原文地址：https://blog.csdn.net/qq_42192641/article/details/132983030