partnerApp/pages/tools/achievement/achievement.vue

<template>
	<view style="margin-bottom: 60upx;">
		<view class="achievementTotal">
			<view>
				<view><text>0</text></view>
				<view><text>年度签单保费</text></view>
			</view>
			<view>
				<view><text>0</text></view>
				<view><text>年度成交单数</text></view>
			</view>
			<view>
				<view><text>0</text></view>
				<view><text>年度单均保费</text></view>
			</view>
		</view>
		<view class="qiun-charts">
			<view class="qiun-title">日度报表统计图</view>
			<canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix"
			 @touchend="touchEndMix"></canvas>
			<navigator url="../daysAchievement/daysAchievement">
				<view class="row d-flex a-center">
					<view>日度业务分析</view>
					<view>&gt;</view>
				</view>
			</navigator>
		</view>
		<view class="qiun-charts">
			<view class="qiun-title">月度报表统计图</view>
			<canvas canvas-id="canvasMix1" id="canvasMix1" class="charts" disable-scroll=true @touchstart="touchMix1" @touchmove="moveMix1"
			 @touchend="touchEndMix1"></canvas>
			<navigator url="../monthsAchievement/monthsAchievement">
				<view class="row d-flex a-center">
					<view>月度业务分析</view>
					<view>&gt;</view>
				</view>
			</navigator>
		</view>
	</view>
</template>
<script>
	import uCharts from '@/components/modules/tools/achievement/u-charts/u-charts.js';
	var _self;
	var canvaMix = null;
	var canvaMix1 = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,

			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data: {},
					success: function(res) {
						console.log(res.data.data)
						let Mix = {
							categories: [],
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Mix.categories = res.data.data.Mix.categories;
						Mix.series = res.data.data.Mix.series;
						_self.showMix("canvasMix", Mix);
						_self.showMix1("canvasMix1", Mix);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showMix(canvasId, chartData) {
				canvaMix = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: true
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						gridType: 'dash',
						splitNumber: 5,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						tooltip: {
							bgColor: '#000000',
							bgOpacity: 0.7,
							gridType: 'dash',
							dashLength: 8,
							gridColor: '#1890ff',
							fontColor: '#FFFFFF',
							horizentalLine: true,
							xAxisLabel: true,
							yAxisLabel: true,
							labelBgColor: '#DFE8FF',
							labelBgOpacity: 0.95,
							labelAlign: 'left',
							labelFontColor: '#666666'
						}
					},
				});
			},
			showMix1(canvasId, chartData) {
				canvaMix1 = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					legend: {
						show: true
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						gridType: 'dash',
						splitNumber: 5,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						tooltip: {
							bgColor: '#000000',
							bgOpacity: 0.7,
							gridType: 'dash',
							dashLength: 8,
							gridColor: '#1890ff',
							fontColor: '#FFFFFF',
							horizentalLine: true,
							xAxisLabel: true,
							yAxisLabel: true,
							labelBgColor: '#DFE8FF',
							labelBgOpacity: 0.95,
							labelAlign: 'left',
							labelFontColor: '#666666'
						}
					},
				});
			},
			touchMix(e) {
				canvaMix.scrollStart(e);
			},
			touchMix1(e) {
				canvaMix1.scrollStart(e);
			},
			moveMix(e) {
				canvaMix.scroll(e);
			},
			moveMix1(e) {
				canvaMix1.scroll(e);
			},
			touchEndMix(e) {
				canvaMix.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaMix.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchEndMix1(e) {
				canvaMix1.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaMix1.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style scoped>
	.achievementTotal {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 25upx 30upx;
		font-size: 28upx;
		border-bottom: 10upx solid #ccc;
	}

	.achievementTotal view {
		text-align: center;
	}

	.qiun-title {
		height: 70upx;
		line-height: 70upx;
		font-size: 30upx;
		font-weight: bold;
		padding: 0upx 20upx;
		background: #FAFAFA;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.qiun-charts .row {
		line-height: 80upx;
		height: 80upx;
		padding: 0 30upx;
		font-size: 30upx;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
</style>