uniapp 使用uChars堆叠柱状图遇到坑

最新推荐文章于 2024-08-02 16:35:26 发布

段先生~

最新推荐文章于 2024-08-02 16:35:26 发布

阅读量2.5k

点赞数 1

分类专栏：图表 echars 文章标签：前端 uni-app echarts

本文链接：https://blog.csdn.net/qq_35867245/article/details/121695545

版权

本文介绍了在uni-app中使用uCharts组件实现堆叠柱状图的过程，包括下载组件、引入项目、数据结构封装及使用注意事项。在引用组件时需将整个qiun-data-chars文件夹复制到uniapp的components目录下，并确保每个series数据项都有值，无数据时用0填充，避免报错。

摘要由CSDN通过智能技术生成

uChars官网地址：秋云uCharts图表组件

一、绘制堆叠柱状图

首先，去官网下载demo项目，讲需要的组件引入到项目中，放入到uniapp项目对应的components文件下（注意：要把整个qiun-data-chars文件夹全部复制过去），如图：

然后，根据自己的需求引用，先引入组件并注册

import QiunDataCharts from '../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';

引用

<qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}"
						 :chartData="bankdata" :echartsH5="false" />

获取后台数据（数据结构是在后台封装好的）

this.$app.api.getBankDetailsList({
								saleId: this.id,
								days: this.day
							})
							.then((res) => {
								console.log("堆叠柱状图", res)
								if (res.data.categories && res.data.categories.length > 0)         
                                 {
									for (var i = 0; i < res.data.categories.length; i++) {
										let str = res.data.categories[i].substr(5, 6)
										res.data.categor