Ucharts在uniapp中vue3版本图表不能随着页面上下滚动

问题:开发完成图表发现到真机微信小程序IOS无法随着页面上下滚动

解决方案:开启canvas2d

我是用的Ucharts的原生开发方式

一、在canvas上面添加type="2d“

                    <canvas ref="canvasRef" canvas-id="aUoYcBNsRogAoMZxIQIDzgAKlBYDkLXS" id="aUoYcBNsRogAoMZxIQIDzgAKlBYDkLXS" 
                    type="2d"
                        class="charts" @touchend="tap" />

二、JS代码    百度和参考Ucharts的原生代码工具全部代码   底层不太懂 但是可以跑起来

    const instance = getCurrentInstance()
    const query = uni.createSelectorQuery().in(instance)




  query.select('#' + id).fields({ node: true, size: true }).exec(res => {
        if (res[0]) {
            if (res[0]) {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          canvas.width = res[0].width ;
          canvas.height = res[0].height ;
          uChartsInstance[id] = new uCharts({
            type: "radar",
            context: ctx,
            width: cWidth.value ,
            height: cHeight.value ,
            categories: data.categories,
            series: data.series,
            // pixelRatio: this.pixelRatio,
            animation: true,
            timing: "easeOut",
            duration: 1000,
            rotate: false,
            rotateLock: false,
            background: "#FFFFFF",
            color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
            padding: [5,5,5,5],
            fontSize: 13,
            fontColor: "#666666",
            dataLabel: false,
            dataPointShape: true,
            dataPointShapeType: "solid",
            touchMoveLimit: 60,
            enableScroll: false,
            enableMarkLine: false,
        legend: {
            show: false,
            position: "right",
            lineHeight: 25,
            float: "center",
            padding: 5,
            margin: 5,
            fontSize: 13,
            fontColor: "#666666",
            hiddenColor: "#CECECE",
            itemGap: 10
        },
           extra: {
            radar: {
                gridType: "radar",
                gridColor: "#DEE5F0",
                gridCount: 4,
                opacity: 0.3,
                max: 200,
                labelShow: true,
                gridEval: 1,
                radius: 0,
                axisLabelTofix: 0,
                labelColor: "#444444",
                border: true,
                labelPointShow: false,
                labelPointRadius: 3,
                labelPointColor: "#DEE5F0",
                borderWidth: 1,
                linearType: "none", //custom,
            },
            tooltip: {
                showBox: false,
            }
        },
          });
        }else{
          console.error("[uCharts]: 未获取到 context");
        }
        }
})

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值