consumoption/pages/mintir/index.vue

<template>
	<view class="content">
		<scrollView ref="scrollViewComponent"></scrollView>
		<view class="chart-con">
			<view class="cartsList-all">
				<view class="cartsList-name">
					消耗数据趋势
				</view>
				<view class="cartsList-seleven">
					<uni-data-select v-model="valueList" :localdata="rangelineChart" @change="changelineChart"
						:clear="false"></uni-data-select>
				</view>
			</view>
			<view class="select-button">
				<view :style="{
			       border: flagE === index + 1 ? '1px solid #90ffe4' : '1px solid #808080',
					color: flagE === index + 1 ? '#90ffe4' : '#808080',
					height: '40rpx',
					width: '100rpx',
					display: 'inline-block',
					cursor: 'pointer',
					textAlign: 'center',
					fontSize: '24rpx',
					fontFamily: '微软雅黑',
					lineHeight: '40rpx',
			    }" v-for="(item, index) in navList" :key="item.id" @click="handleClickBtnE(index)">
					{{ item.name }}
				</view>
			</view>
			<view class="chart-wrap">
				<view class="line-chart-con">
					<l-echart class="line-chart" ref="lineChart"></l-echart>
				</view>
			</view>
		</view>
		<PieCharts ref="PieChartsComponent"></PieCharts>
		<view class="chart-con">
			<view class="cartsList-all">
				<view class="cartsList-name">
					分类消耗占比
				</view>
				<view class="cartsList-seleven">
					<uni-data-select v-model="valueTimeType" :localdata="rangeringChart" @change="changeringChart"
						:clear="false"></uni-data-select>
				</view>
			</view>
			<view class=".chart-wrap-bing">
				<view class="ring-chart">
					<l-echart ref="ringChart"></l-echart>
				</view>
			</view>
		</view>
		<tiewk ref="tiewkComponent"></tiewk>
		<enterprise ref="enterpriseComponent"></enterprise>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	import scrollView from './scrollView/scrollView.vue';
	import PieCharts from './PieCharts/PieCharts.vue';
	import enterprise from './enterprise/enterprise.vue';
	import tiewk from './tiewk/tiewk.vue';
	export default {
		components: {
			scrollView,
			PieCharts,
			tiewk,
			enterprise
		},
		data() {
			return {
				navList: [
					// 	{
					// 	name: "按科室"
					// },

					{
						name: "按种类"
					}, {
						name: "集采"
					}
				],
				statType: "mcsType",
				LineData: [], //折线图数据
				EllData: [], //总汇折线图
				AllData: [], //存放全部数据
				yearl: [], //切换年月的数组
				pieData: [], //饼图
				AdList: null, //main实例
				type: 1, //交易分析模块里的类型
				valueList: 'Y',
				valueTimeType: "Y",
				flagE: 1,
				rangelineChart: [{
						value: 'Y',
						text: "年"
					},
					{
						value: 'M',
						text: "月"
					},
				],
				rangeringChart: [{
					value: 'Y',
					text: "年",
				}, {
					value: 'M',
					text: "月",
				}, {
					value: 'W',
					text: "周",
				}, {
					value: 'D',
					text: "日",
				}]
			}
		},
		created() {
			this.listData();
			this.Listson()
		},
		mounted() {
			//加载饼环数据
			this.loadRingData();
			//加载折线图数据
			this.loadLineData();
		},
		methods: {
			onPullDownRefresh() {
				this.listData();
				this.Listson();
				this.$refs.enterpriseComponent.getData();
				this.$refs.tiewkComponent.listData();
				this.$refs.scrollViewComponent.listData();
				this.$refs.PieChartsComponent.listData();
				setTimeout(function() {
					uni.stopPullDownRefresh(); //停止下拉刷新动画
				}, 1000);
			},
			Listson() {
				this.$http('homePage.amtCosm', {
					timeType: this.valueTimeType
				}, '加载中').then((res) => {
					this.pieData = res.data;
					this.pieData = res.data.map((item) => {
						return {
							value: item.mcsAmt,
							name: item.mcsType,
						};
					});
					// 获取饼图的图例数据
					this.pieName = res.data.map((item) => item.mcsType);
					this.loadRingData();
				});
			},
			listData() {
				this.AllData = [];
				// 获取每个月的天数;
				const getDaysInMonth = (year, month) => {
					return new Date(year, month, 0).getDate();
				};
				this.$http('homePage.statCosm', {
					timeType: this.valueList,
					statType: this.statType
				}, '加载中').then((res) => {
					const year = new Date().getFullYear(); // 获取当前年份
					if (this.valueList === "M") {
						const daysInMonth = getDaysInMonth(year, new Date().getMonth() + 1); // 获取当前月份的天数
						this.yearl = Array.from({
							length: daysInMonth
						}, (_, i) => i + 1).map(
							(day) => `${day}`
						);
					} else {
						this.yearl = Array.from({
							length: 12
						}, (_, i) => i + 1).map(
							(month) => `${month}月`
						);
					}
					this.LineData = res.data.deptCosmList;
					this.EllData = res.data.totalCosm;
					const ellSeries = {
						name: "全部",
						data: this.EllData,
						smooth: true,
						type: "line",
					};
					this.AllData.push(ellSeries);
					const lineSeries = this.LineData.map((item) => ({
						name: item.type,
						data: item.cnt,
						smooth: true,
						type: "line",
					}));
					this.AllData = this.AllData.concat(lineSeries);
					this.loadLineData();
				})
			},
			changelineChart(e) {
				this.valueList = e
				this.updateListData();
			},
			// 消耗数据统计
			handleClickBtnE(index) {
				this.flagE = index + 1;
				if (index === 0) {
					// this.handleQuery("dept");
					// this.updateListData();
					this.handleQuery("mcsType");
					this.updateListData();
				} else if (index === 1) {
					this.handleQuery("isFas");
					this.updateListData();
				} else if (index === 2) {

				}
			},
			handleQuery(param) {
				this.statType = param;
			},
			updateListData() {
				this.listData({
					mcsType: this.valueList,
					timeType: this.value
				});
			},
			changeringChart(e) {
				this.valueTimeType = e
				this.Listson({
					timeType: this.valueTimeType
				})
			},
			loadRingData() {
				//这里请求服务器得到数据
				let data = this.pieData

				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				this.$refs.ringChart.init(echarts, chart => {
					chart.setOption({
						legend: {
							data: this.pieData.map((item) => item.name),
							left: "3%",
							top: "30%",
							orient: "vertical",
						},
						tooltip: {
							trigger: "item",
							position: ['30%', '30%'],
							axisPointer: {
								type: "shadow",
							},
							backgroundColor: "#fff", // 悬浮框背景色
							// borderColor: "#000", // 悬浮框边框颜色
							borderWidth: 1, // 悬浮框边框宽度
							textStyle: {
								// 悬浮框文字样式
								color: "#000",
								fontSize: '10rpx',
							},
							formatter: "{b} : {c}万元: {d}%", //鼠标移入提示框显示内容
						},
						series: [{
							type: 'pie',
							// selectedMode: 'single',
							// selectedOffset: 0,
							// hoverAnimation: false,
							radius: [40, 65],
							left: 'center',
							width: '98%',
							//隐藏默认白边
							itemStyle: {
								borderColor: '#fff',
								borderWidth: 0
							},
							//格式化label显示
							label: {
								alignTo: 'edge',
								show: true,
								formatter: "{b} : {c}万元: {d}%",
								minMargin: 5,
								edgeDistance: 20,
								lineHeight: 24,
								rich: {
									time: {
										fontSize: 10,
										color: '#999'
									}
								}
							},
							//指向label的线设置
							labelLine: {
								length: 15,
								length2: 0,
								maxSurfaceAngle: 80
							},
							//布局样式
							labelLayout: function(params) {
								const isLeft = params.labelRect.x < chart.getWidth() / 2;
								const points = params.labelLinePoints;

								points[2][0] = isLeft ?
									params.labelRect.x :
									params.labelRect.x + params.labelRect.width;
								return {
									labelLinePoints: points
								};
							},

							//数据
							data: this.pieData
						}]
					});
					//默认突出高亮显示，可以放开下面注释
					// chart.dispatchAction({
					// 	type: 'highlight',
					// 	seriesIndex: 0,
					// 	dataIndex: 0
					// });
					//监听图标项点击事件
					chart.on("click", function(e) {
						for (var i = 0; i < data.length; i++) {
							if (i != e.dataIndex) {
								chart.dispatchAction({
									type: 'downplay', //取消高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							} else {
								chart.dispatchAction({
									type: 'highlight', //突出高亮显示;
									seriesIndex: 0,
									dataIndex: i
								});
							}
						}
					});
				});
			},
			//加载折线图数据
			loadLineData() {
				//这里请求服务器拿到数据
				let res = {
					//x轴数据
				}
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				let option = {
					legend: {
						data: this.AllData.map((item) => item.name),
					},
					dataZoom: [{
						bottom: 10, // 下滑块距离x轴底部的距离
						height: 20, // 下滑块手柄的高度调节
						type: 'inside', // 类型，滑动块插件
						show: true, // 是否显示下滑块
						xAxisIndex: [0], // 选择的x轴
						start: this.valueList === "M" ? 10 : 120, // 初始数据显示多少
						end: this.valueList === "M" ? 35 : 350 // 初始数据最多显示多少
					}],

					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#a7a7a7',
						},
						// x轴那天坐标轴线的颜色
						axisLine: {
							lineStyle: {
								color: '#f1f1f1',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						//这里是x轴数据
						data: this.yearl,
					},
					//设置网格
					grid: {
						top: 40,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						//y轴标签文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '{b}:  \n {a0}: {c0} \n {a1}: {c1} \n {a2}: {c2} \n {a3}: {c3}'
					},
					//设置曲线的颜色
					color: ['#4e9d77', '#fac858', '#ee6666'],
					series: this.AllData
				};

				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(option);
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		padding: 20rpx 0rpx 100rpx;
	}


	.chart-scroll-wrap {
		width: 100%;
	}

	.chart-con {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 28rpx;

		.chart-wrap {
			width: 100%;
			box-sizing: border-box;
			padding: 32rpx 0rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background-color: #fff;
			border-width: 0 4rpx 4rpx 4rpx;
			/* 上、右、下、左 边框宽度 */
			border-style: solid;
			border-color: #90ffe4;

		}

		.chart-wrap-bing {
			width: 100%;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;

			.ring-chart {
				height: 400rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 28rpx;
				// margin-top: 32rpx;
				border-width: 0 4rpx 4rpx 4rpx;
				/* 上、右、下、左 边框宽度 */
				border-style: solid;
				border-color: #90ffe4;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
			}

		}
	}

	.line-chart-con {
		box-sizing: border-box;
		padding: 0rpx 28rpx;


		.line-chart {
			width: 100%;
			margin-top: 30rpx;
			height: 450rpx;
		}
	}

	.cartsList-all {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		border-width: 4rpx 4rpx 4rpx 4rpx;
		/* 上、右、下、左 边框宽度 */
		border-style: solid;
		border-color: #90ffe4;
		padding: 20rpx;
		box-sizing: border-box;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.cartsList-name {
			font-size: 35rpx;
			font-weight: bold;
			position: relative;
		}
	}

	.select-button {
		width: 375rpx;
		position: absolute;
		right: 100rpx;
		top: 510rpx;
		z-index: 999;
	}
</style>