uniapp中uCharts原生canvas开启滚动无法拖拽

搜索官方文档得知是因为@touchend=“tap” @touchstart=“touchstart” @touchmove="touchmove"事件被禁止需要开始,但是这里使用的是原生的cavans无法解决,组件的话价格属性就直接加上:ontouch=‘true’,
开启氪金模式后终于看到了几个事件的写法

<canvas canvas-id="AbCanCGONoKeEpdazPGUtYqfUAAfydVV" id="AbCanCGONoKeEpdazPGUtYqfUAAfydVV" class="charts"
                @touchend="tap" @touchstart="touchstart" @touchmove="touchmove"  />
import uCharts from '@/utils/ucharts.js'
var uChartsInstance = {};
export default {
    components: {
        Count,
        WybTable
    },
    data() {
        return {
            cWidth: 750,
            cHeight: 500
        }
    },
    onReady() {
        //这里的 750 对应 css .charts 的 width
        this.cWidth = uni.upx2px(750);
        //这里的 500 对应 css .charts 的 height
        this.cHeight = uni.upx2px(500);
        this.getServerData();
    },
    methods: {
        getServerData() {
            //模拟从服务器获取数据时的延时
            setTimeout(() => {
                //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
                let res = {
                    categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
                    series: [
                        {
                            name: "成交量A",
                            data: [35, 8, 25, 37, 4, 20]
                        },
                        {
                            name: "成交量B",
                            data: [70, 40, 65, 100, 44, 68]
                        },
                        {
                            name: "成交量C",
                            data: [100, 80, 95, 150, 112, 132]
                        }
                    ]
                };
                this.drawCharts('AbCanCGONoKeEpdazPGUtYqfUAAfydVV', res);
            }, 500);
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
            uChartsInstance[id] = new uCharts({
                type: "line",
                context: ctx,
                width: this.cWidth,
                height: this.cHeight,
                categories: data.categories,
                series: data.series,
                animation: true,
                background: "#FFFFFF",
                color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding: [15, 10, 0, 15],
                enableScroll: true,
                legend: {},
                xAxis: {
                    disableGrid: true,
                    itemCount:2,
                    scrollShow:true
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2
                },
                extra: {
                    line: {
                        type: "straight",
                        width: 2,
                        activeType: "hollow"
                    }
                }
            });
        },
        tap(e) {
            uChartsInstance[e.target.id].scrollEnd(e);
            uChartsInstance[e.target.id].touchLegend(e);
            uChartsInstance[e.target.id].showToolTip(e);
        },
        touchstart(e){
            uChartsInstance[e.target.id].scrollStart(e);
        },
        touchmove(e){
            uChartsInstance[e.target.id].scroll(e);
        }
    }
}
</script>
<style lang="less" scoped>
    .charts{
        width: 750rpx;
        height: 500rpx;
    }
</style>```


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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值