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

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.categories[i] = str
									}
								}
								this.bankdata.categories = res.data.categories
								this.bankdata.series = res.data.series
								this.bankdata.series[0].color = "#FA4E4E"
								this.bankdata.series[1].color = "#4E66F3"
								this.bankdata.series[1].format = 'seriesFormat'
								this.bankSale.curMonthtotalCount = 
                                res.data.bankSales.curMonthtotalCount;
								this.bankSale.memeberCount = 
                                 res.data.bankSales.memeberCount,
									this.bankSale.orgCount = res.data.bankSales.orgCount
								this.salesRate = res.data.salesRate
							})
							.catch((error) => {
								this.handleEndErr();
							});

后台数据结构封装代码（堆叠柱状图）

Map<String, Object> map = new HashMap<String, Object>();
        //学典销量
        BankSaleOrderCountDto bankSales = baseMapper.getBankSales(saleId);
        Double salesRate = (Double.parseDouble(bankSales.getCurMonthtotalCount().toString())- Double.parseDouble(bankSales.getLastMonthTotalCount().toString()))
                /Double.parseDouble(bankSales.getLastMonthTotalCount().toString())*100;
        if(Double.isNaN(salesRate) || Double.isInfinite(salesRate)){
            salesRate = 0.0d;
        }
        map.put("bankSales",bankSales);
        map.put("salesRate",salesRate);
        //获取柱状图纵坐标数据
        List<Map<String,Object>> series=new ArrayList<Map<String,Object>>();
        //堆叠柱状图会员销量
        List<BankSaleOrderCountDto> memberSales = baseMapper.getMemberSales(saleId,days);
        //堆叠柱状图机构销量
        List<BankSaleOrderCountDto> orgSales =  baseMapper.getOrgSales(saleId,days);
        Map<String,Object> memberMap = new HashMap<String,Object>();
        Map<String,Object> orgMap = new HashMap<String,Object>();
        memberMap.put("name","学员购买数量");
        orgMap.put("name","机构购买数量");
        List<Integer> memberList = new ArrayList<Integer>();
        List<Integer> orgList = new ArrayList<Integer>();
        //获取横坐标
        List<Date> categories = baseMapper.getDate(days);

        if(categories!=null && categories.size() > 0){
            if(memberSales!=null && memberSales.size() > 0){
                for (int i = 0; i < categories.size(); i++) {
                    for (int j = 0; j < memberSales.size(); j++) {
                        if(categories.get(i).equals(memberSales.get(j).getCreateDate())){
                            memberList.add(memberSales.get(j).getMemberCount());
                        }else{
                            memberList.add(0);
                        }
                    }
                }
            }else{
                for (int i = 0; i < categories.size(); i++) {
                    memberList.add(0);
                }
            }



            if(orgSales!=null && orgSales.size() >0){
                for (int i = 0; i < categories.size(); i++) {
                    for (int j = 0; j < orgSales.size(); j++) {
                        if(categories.get(i).equals(orgSales.get(j).getCreateDate())){
                            orgList.add(orgSales.get(j).getOrgCount());
                        }else{
                            orgList.add(0);
                        }
                    }
                }
            }else{
                for (int i = 0; i < categories.size(); i++) {
                    orgList.add(0);
                }
            }


        }

        memberMap.put("data",memberList);
        series.add(memberMap);

        orgMap.put("data",orgList);
        series.add(orgMap);

        map.put("categories",categories);
        map.put("series",series);
        return map;

使用堆叠柱状图注意事项：series中的每一组data数据值都不能为空，没有数据补0，否则会报错

圆环图数据结构封装

public Map<String, Object> pieMap(String saleId) {

        Map<String, Object> pieMap  =  new HashMap<String, Object>();
        List<Map<String,Object>> series=new ArrayList< Map<String,Object>>();
        Map<String, Object> pieMap1  =  new HashMap<String, Object>();
        List<Map<String,Object>> data  = new ArrayList<Map<String,Object>>();
        List<Map<String,Object>> data1  = new ArrayList<Map<String,Object>>();
        //查询累计营业额
        BankSaleOrderCountDto salesMoney = baseMapper.getTotalMoney(saleId);
        //查询月退款数据
        BankSaleOrderCountDto refundCount = baseMapper.getRefundSales(saleId);
        Map<String,Object> memberMap = new HashMap<String,Object>();
        Map<String,Object> orgMap = new HashMap<String,Object>();
        memberMap.put("name","学员退款数量");
        memberMap.put("value",refundCount.getMemberRefundSales());
        orgMap.put("name","机构退款数量");
        orgMap.put("value",refundCount.getOrgRefundSales());
        pieMap.put("salesMoney",salesMoney);
        data.add(memberMap);
        data.add(orgMap);
        pieMap1.put("data",data);
        series.add(pieMap1);
        pieMap.put("series",series);
        pieMap.put("totalRefundCount",refundCount.getOrgRefundSales()+refundCount.getMemberRefundSales());
        return pieMap;
    }