uniapp使用uCharts及配置格式化

祝大家元旦快乐！加油2023~~~

uCharts

效果图

定义需要格式化的数据并配置

• 在config-ucharts.js内定义您想要的格式化数据

• 设置对应配置项格式化【见效果图】

this.opts1.xAxis.format = "xAxisDemo1";

this.opts2.yAxis.data[0].format = "seriesDemo2"

series: [
    {
        name: "销售额",
        data: datas.order_total,
        format: "seriesDemo2"
    }
]

Demo

• 根据所需调整，这里相关配置项没有封装~

html

<template>
	<view class="statisticsWrap">
        <view class="statistics module">
            	<!-- 自定义内容，可忽略 -->
				<view class="fcb pd24">
					<view class="ft26 bold">订单数(个)</view>
					<view class="fc group-box">
						<view class="group-item" :class="oIndex == index ? 'actives' : ''" v-for="(item, index) in groupBtnList" :key="index" @click="updateDataTap(1, index, item)">{{item.name}}</view>
					</view>
				</view>
				
				<!-- 使用组件 柱状图  -->
				<view class="charts-box">
				  <qiun-data-charts
					type="column"
					:chartData="chartData"
					:opts="opts1"
				  />
				</view>
			</view>
			
			<view class="module mt28">
				<view class="fcb pd24">
					<view class="ft26 bold">销售额({{curStatus == 'day' ? '元' : '万元'}})</view>
					<view class="fc group-box">
						<view class="group-item" :class="sIndex == index ? 'actives' : ''" v-for="(item, index) in groupBtnList" :key="index" @click="updateDataTap(2, index, item)">{{item.name}}</view>
					</view>
				</view>
				
				<!-- 使用组件 折线图 -->
				<view class="charts-box">
				  <qiun-data-charts
					type="line"
					:chartData="chartLine"
					:opts="opts2"
				  />
				</view>
			</view>
		</view>

    </view>
</template>

js

<script>
	export default {
		data() {
			return {
				infoData: {},
				chartData: {},
				chartLine: {},
				opts1: { // 初始化配置项，根据需要修改
					color: ['#6EC4FF'],
					padding: [25,10,10,10],
					fontSize: 9,
					legend: {
						show: false
					},
					xAxis: {
					  fontSize: 9
					},
					yAxis: {
					  data: [
						{
						  min: 0,
						  fontSize: 9
						}
					  ],
					  gridType: 'dash'
					},
					extra: {
					  column: {
						type: "group",
						width: 20,
						activeBgColor: "#6EC4FF",
					  }
					},
				},
				opts2: { // 相关配置项
					color: ['#6EC4FF'],
					padding: [25,10,10,10],
					fontSize: 9,
					legend: {
						show: false
					},
					xAxis: {
					  disableGrid: true
					},
					yAxis: {
					  gridType: "dash",
					  data: [
						{
						  min: 0,
						}
					  ],
					},
					extra: {
					  line: {
						type: "curve",
						width: 2
					  }
					}
				},
				orderInfo: {},
				groupBtnList: [
					{name: '近7天', type: 'day'},
					{name: '近7月', type: 'month'}
				],
				oIndex: 0,
				sIndex: 0, // 操作当前图形index
				curtype: 0, // 1:订单数 2: 销售额
				curStatus: 'day'
			}
		},
		onReady() {
			// 初始化 获取数据
			this.getInitData();
		},
		methods: {
			/**
			 * 获取统计图数据信息
			 */
			getInitData() {
				this.$api.sendRequest({
					url: '/api/index/stat_chart',
					data: {
						type: this.curStatus
					},
					success: res => {
						if (res.code >= 0) {
							let datas = res.data;
							
                            // 根据需求处理数据
							if (this.curtype == 1) {
								this.getBarData(datas);
                                
							} else if (this.curtype == 2 ) {
								this.getLineData(datas);
                                
							} else { // 首次加载执行
								this.getBarData(datas);
								
								this.getLineData(datas);
							}
						}
						
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: () => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			/**
			 * 获取订单数 数据【柱状图】
			 */
			getBarData(datas) {
				let res = {
					categories: datas.time,
					series: [
					  {
						name: "订单数",
						data: datas.order_pay_count,
					  }
					]
				  };
				
                // 格式化 xAxis
				this.opts1.xAxis.format = this.curStatus == 'day' ? "xAxisDemo1" : '';
                // 赋值
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			/**
			 * 获取销售额 数据【折线图】
			 */
			getLineData(datas) {
				let res = {
					categories: datas.time,
					series: [
					  {
						name: "销售额",
						data: datas.order_total,
						format: this.curStatus == 'day' ? "": "seriesDemo2"
					  }
					]
				};
                
				// 格式化 yAxis
				this.opts2.yAxis.data[0].format = this.curStatus == 'month' ? "seriesDemo2" : '';
                
				this.chartLine = JSON.parse(JSON.stringify(res));
			},
			/**
			 * 根据不同类型，处理相关数据
			 */
			updateDataTap(type, index, item) {
				this.curtype = type;
				this.curStatus = item.type;
				switch(type) {
					case 1:
						this.oIndex = index;
						break;
					case 2:
						this.sIndex = index;
						break;
				}
				
				this.getInitData();
			}
		}
	}
</script>

scss

<style lang="scss" scoped>
	.statisticsWrap {
		.statistics {
			margin: 0 28rpx;
		}
		.mt28 {
			margin: 28rpx;
		}
		.charts-box {
			width: 100%;
			height: 500rpx;
		}
		.group-box {
			.group-item {
				border: 1rpx solid #ebebeb;
				padding: 0 24rpx;
				&:nth-child(1) {
					@include borderRadius(10rpx 0 0 10rpx);
				}
				&:nth-child(2) {
					border-left: none;
					@include borderRadius(0 10rpx 10rpx 0);
				}
			}
			.actives {
				@include bg(#6EC4FF);
				color: $white;
				border-color: #6EC4FF;
			}
		}
	}
</style>