talent_map/uniapp/pages/kanban/kanban.vue

<template>
	<view class="chart-panel">
		<view class="charts-item">
			<view class="flex">
				<text
					style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
				<view class="bold font-size-30">占比饼状图</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="charts-item">
			<view class="flex">
				<text
					style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
				<view class="bold font-size-30">金字塔漏斗图</view>
			</view>
			<view class="charts-box" style="height: 500px;">
				<qiun-data-charts type="funnel" :opts="optsFunel" :chartData="chartData" />
			</view>
		</view>
		<view class="charts-item">
			<view class="flex">
				<text
					style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
				<view class="bold font-size-30">城市词云图</view>
			</view>
			<view class="charts-box" style="height: 500px;">
				<qiun-data-charts type="word" :opts="opts" :chartData="chartDataWord" />
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getTalentsCount
	} from '@/api/app';
	import {
		mapActions,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				chartData: {},
				chartDataWord: {},
				opts: {
					// dataLabel: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					// padding: [5, 5, 5, 5],
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					enableScroll: false,
					legend: {
						padding: 5,
						margin: 5,
						float: 'left'
					},
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 10,
							border: true,
							borderWidth: 1,
							borderColor: "#FFFFFF",
							// linearType: "custom"
						},
						funnel: {
							activeOpacity: 0.3,
							activeWidth: 10,
							border: true,
							borderWidth: 2,
							borderColor: "#FFFFFF",
							fillOpacity: 1,
							labelAlign: "right",
							type: "pyramid"
						},
						word: {
							type: "normal",
							autoColors: true
						}
					}
				},
				optsFunel: {
					dataLabel: false,
				},
			}
		},
		onLoad(options) {
			Object.assign(this.optsFunel, this.opts);
		},
		onReady() {

		},
		onUnload() {},
		onShow() {
			this.getCountFun();
			this.getUser();
		},
		onPullDownRefresh() {
			this.getCountFun();
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
		},
		onHide() {},
		methods: {
			...mapActions(['getUser']),
			async getCountFun() {
				const {
					status,
					data
				} = await getTalentsCount({});
				if (status == 1) {
					let res = {
						series: [{
							data: data.normal,
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
					res = {
						series: data.word
					};
					this.chartDataWord = JSON.parse(JSON.stringify(res));
				}
				uni.stopPullDownRefresh();
			},
		},
		computed: {
			...mapGetters(['sysInfo', 'appConfig']),
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
		height: 100%;
	}

	.chart-panel {
		padding-bottom: calc(50px + env(safe-area-inset-bottom));
	}

	.charts-item {
		background: #FFFFFF;
		box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.03);
		border-radius: 6px 6px 6px 6px;
		padding: 20rpx;
		margin: 30rpx;
	}

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