qiun-data-charts uCharts的二次封装使用

 uni-app开发APP的时候会有部分需求要使用到图表，常规的的echarts在这里显然不适用，今天我们使用的是插件商店的qiun-data-charts，使用之前我们需要到插件商店进行导入。

1、导入就不说了直接开始使用，这里的需求是需要一个柱状图，点击按钮切换数据变更柱状图的大小

2、在页面中引入组件对组件进行简单的封装，这样下次使用的时候我们就可以不用再从头来写一遍了，记得配置好传入的参数哦

<template>
	<view class="page">

		<view class="chats-box">
//直接引入 chartData是数据 opts是配置信息
			<qiun-data-charts type="column" :animation="true" :chartData="chartData" :opts="chartOpt" />
		</view>
		<view class="text-center mt-60">
			{{this.title}}//犹豫图表标题可配置的灵活度有限我们这里直接写一个
		</view>
	</view>
</template>

<script>
	export default {
		props: ['timeZone', 'title', 'axisX', 'axisy'],
		data() {
			return {
				chartOpt: {
					color: ['#3e65c7'],
					dataLabel: true, //是否显示数据文案  true表示显示，false表示不显示
					yAxis: {
						// 	不绘制Y轴
						// disabled: true,
						// 不绘制横向向网格(即默认绘制网格)
						// disableGrid: true,
						// 横向向网格线型，可选值：'solid'实线,'dash'虚线
						gridType: 'dash',
						// 横向网格为虚线时，单段虚线长度
						dashLength: 20,
						// 横向网格颜色，默认#CCCCCC
						gridColor: '#EDEDED',
						// 不绘制Y轴标题
						// showTitle: true,
						format: 'yAxisDemo2',
						data: [{ //这里y轴分组   left是下标为0的第一组y数据在最左侧
							position: "left",
							axisLine: false, //坐标轴轴线是否显示
							axisLineColor: '#fff', //坐标轴轴线颜色
							fontColor: "#808080",
							fontSize: 12,
							disabled: false, //是否绘画y轴  true不 默认为false
							min: 0, //y轴最小值
							// max: 8000, //y轴最大值   最大值来除以y轴显示的数量=每份的数量
							// unit:'焦',//y轴刻度后面的单位
						}, ]
					},
					xAxis: {
						// 	绘制坐标轴轴线
						axisLine: false,
						// format: "123",
						fontSize: 10,
						fontColor: '#383838',
						labelCount: JSON.parse(this.axisX).length > 6 ? 6 : "", //默认显示个数
					},
					title: {
						// name: '1232',
					},
					extra: {
						tooltip: {
							// 是否显示提示窗的方框及内部文字
							showBox: false,
						},
						// 柱状图配置
						column: {
							width: 18,
							barBorderRadius: [4, 4, 0, 0],
						},
					},
					legend: { //数据标题
						show: false,
						// fontColor: "#000",
						// position: "bottom",
						// float: "center",
						// fontSize: 12,
					}
				},

				chartData: {//传入的接口数据
					categories: JSON.parse(this.axisX),
					series: [{
						name: this.title,
						data: JSON.parse(this.axisy),
					}],
				},

			};
		},
		methods: {
			getAllList() {
				this.chartData = {}
				this.chartOpt.xAxis.labelCount = ''
				this.chartOpt.extra.tooltip.showBox = false
				this.chartOpt.extra.column.width = 18

				if (this.timeZone == '1') {
					this.chartOpt.extra.column.width = 9
					this.chartOpt.xAxis.fontSize = 10
					this.chartOpt.dataLabel = false
					this.chartOpt.extra.tooltip.showBox = true
				}
				if (this.timeZone == '6') {
					this.chartOpt.dataLabel = true
					this.chartOpt.xAxis.fontSize = 14
				}
				if (this.timeZone == 'aa' || this.timeZone == 'dd') {
					let x = JSON.parse(this.axisX)
					if (x.length > 6) {
						this.chartOpt.xAxis.labelCount = 6
						this.chartOpt.extra.tooltip.showBox = true
						this.chartOpt.extra.column.width = 9
					}
					console.log('注入数据')
				}
				this.chartData = {
					categories: JSON.parse(this.axisX),
					series: [{
						name: this.title,
						data: JSON.parse(this.axisy)
					}],
				}
			}
		},

		watch: {//监听变化更新数据变更配置信息
			timeZone: {
				handler(n, o) {
					console.log("子组件", n);
					this.getAllList() //子组件要刷新调用的方法
				}
			}
		}
	}
</script>

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

	.chats-box {
		background-color: white;
		// padding-bottom: 40rpx;
		// padding: 10rpx;
	}
</style>

3、使用到页面中去

<view class=" flex justify-between chart ">
				<view class="font-bold">
					{{timeZone}}
				</view>
				<view class="flex ">
					<uv-tabs lineHeight="0" :itemStyle="{ padding:'0',  height:' 30px',backgroundColor:'#f2f2f2',}"
						:inactiveStyle="{padding:'10rpx 20rpx',}"
						:activeStyle="{backgroundColor:'#3e65c7',padding:'10rpx 20rpx',color:'#fff',borderRadius: '8rpx'}"
						:list="radios" @click="tabClick"></uv-tabs>
				</view>
			</view>
			<view class="chats-box">
//charts 封装好的组件
				<charts v-if="axisy.length>1" :timeZone="timeZone" :axisy="JSON.stringify(axisy)"
					:axisX="JSON.stringify(axisX)" :title="title"></charts>
				<uv-empty v-else mode="data" icon="/static/other/empty_data.png"></uv-empty>
			</view>

<script>
	import {
		getAccountVolumeMonth
	} from '@/api/agent.js';
	import charts from "@/pages/charts/index.vue"//图表组件
	import {
		getNowDate,
		getPreviousTime
	} from '@/common/date.js';
	export default {
		data() {
			return {
				object: {},
				radios: [{//按钮参数可以根据喜好定义
					name: '6个月',
					txt: '近6个月交易额',
					date: 6
				}, {
					name: '近1年',
					txt: '近一年交易额',
					date: 12
				}],
				timeZone: '',
				title: '月交易额(元)',
				axisX: ["1月", "2月", "3月", "4月", "5月", "6月"],
				axisy: [],

			}
		},
		onLoad(options) {
			console.log(JSON.parse(options.item), 'options')
			if (options.item) {//先看一下有没有历史数据
				this.object = JSON.parse(options.item)
			}
			this.loadData()
		},
		components: {
			charts,//注册
		},
		methods: {
			loadData(date = 6, txt = '近6个月交易额') {
				let params = {
					accountId: this.object.accountId,
					fromDate: getPreviousTime(date, true),
					endDate: getNowDate(true),
				}
				getAccountVolumeMonth(params).then((res) => {
					console.log('接口返回数据', res)
					this.axisX = res.categories
					this.title = res.series[0].name
					this.axisy = res.series[0].data
                    //一定要等数据注入后才变更timeZone 
					this.timeZone = txt
				})
			},
			tabClick(e) {
				this.loadData(e.date, e.txt)
			}
		}
	}
</script>

注释：uCharts官网 - 秋云uCharts跨平台图表库部分找不到的配置属性可以到官网查看