supervise-customer-wxmp/pages/index/index3.vue

<template>
	<view class="charts-box">

		<view style="display: flex;justify-content: center; width: 100%; ">
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
				@click="jump(1)">1</text>
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
				@click="jump(2)">2</text>
			<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
				@click="jump(3)">3</text>
		</view>

		<view style="margin-top: 20px;margin-left: 20px;">
			<text>3当日数据</text>
			<text style="margin-left: 10px;">{{newDate}}</text>

		</view>

		<view style="margin-top: 15px;margin-left: 10px;">
			<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" />
		</view>


		<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;">

			<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">现金流量-经营活动产生的现金流量(元)</uni-th>
					<uni-th align="center">总额</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.price }}</uni-td>
				</uni-tr>
			</uni-table>

		</view>

		<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;">

			<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="200" align="center">销售渠道类别</uni-th>
					<uni-th align="center">总额</uni-th>
					<uni-th align="center">应收帐款</uni-th>
					<uni-th align="center">扣除应收</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData2" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.totalAmount }}</uni-td>
					<uni-td align="center">{{ item.accountsReceivable }}</uni-td>
					<uni-td align="center">{{ item.deductionAccountsReceivable }}</uni-td>
				</uni-tr>
			</uni-table>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				newDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
				tableData: [{
						name: "销售商品收到的现金(元)",
						price: "2000000",
					},
					{
						name: "收到其他与经营活动有关的现金(元)",
						price: "28700",
					},
					{
						name: "本项合计",
						price: "123456",
					},
				],
				tableData2: [{
						name: "销售商品收到的现金(元)",
						totalAmount: "2000000",
						accountsReceivable: "31914",
						deductionAccountsReceivable: "35793"
					},
					{
						name: "连锁内加盟",
						totalAmount: "2000000",
						accountsReceivable: "31914",
						deductionAccountsReceivable: "35793"
					},
					{
						name: "配送中心",
						totalAmount: "2000000",
						accountsReceivable: "31914",
						deductionAccountsReceivable: "35793",
					}, {
						name: "连锁外加盟",
						totalAmount: "2000000",
						accountsReceivable: "31914",
						deductionAccountsReceivable: "35793",
					}
				],
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						title: ""
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: "折线"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "柱状图",
								textAlign: "left"
							},
						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				}
			};
		},
		onLoad() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "仓库货值",
								index: 1,
								type: "column",
								data: [40, {
									"value": 30,
									"color": "#f04864"
								}, 55, 110, 24, 58]
							},
							{
								name: "在途货值",
								index: 1,
								type: "column",
								data: [50, 20, 75, 60, 34, 38]
							}, {
								name: "门店货值",
								index: 1,
								type: "column",
								data: [50, 20, 75, 60, 34, 38]
							}, {
								name: "账户余额",
								index: 1,
								type: "column",
								data: [50, 20, 75, 60, 34, 38]
							}, {
								name: "应收账款",
								index: 1,
								type: "column",
								data: [50, 20, 75, 60, 34, 38]
							}, {
								name: "借款金额",
								index: 1,
								type: "column",
								data: [50, 20, 75, 60, 34, 38]
							},
							{
								name: "折线",
								type: "line",
								color: "#D33682",
								data: [120, 140, 105, 170, 95, 160]
							},
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			jump(index) {
				console.log("index>>3", index)
				switch (index) {
					case 1:
						uni.navigateTo({
							url: 'index'
						});
						break;

					case 2:
						uni.navigateTo({
							url: 'index2'
						});

						break;

					case 3:

						break;
				}
			}
		},

	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>