旧版本的ucharts的图表左右滑动记录

新版本的ucharts文档说实话不如以前的自定义设计的工具方便了,观看感觉上难了很多,前一阵子看到的时候都懵了,不过ucharts版本更新的我还是支持的,感谢秋云和他的小伙伴设计的这个ucharts,解决了我们这些技术一般的前端程序猿的问题。
言归正传,写这篇文章的原因是,公司用了旧版本的ucharts,然后先需求是要做一个可以左右拖拉的柱状图,我当时就直接搜索了ucharts官网,然后就发现版本更新了,顺着更新的文档查询,发现比以前入门和设计出想要的图表的难度升级了3倍,(在线编辑图表工具收费,而且文档没有示例(作者是个费,看懂文档需要一定程度,以前的直接在线演示就行),新增改动的东西没有做变换管理)
好,回到正题,我发现功能实现变了,还要使用·@touchstart, @touchmove, @touchend·这三个方法才能实现,而且里面的方法变成了,但是问题不大,那我就写呗,然后就发现要加下面这玩意了,

 uChartsInstance[id] = new uCharts(opts);

new uCharts 我根本没有new出来,当时就决定比以前的麻烦好多,然后想到可能是公司的版本老旧,还是得使用原来的方法,我就又准备去看以前的描述,结果在官网上根本没有,最终在以前的一些小伙伴的博客上找到的,所以希望ucharts官方需要对这方面进行一个旧版本展示说明,真的谢谢了

现在就记录以前的方法吧

1、设置了opts.enableScroll:true
2、opts.xAxis.itemCount  展示的数据数量, 
3、在组件引用上增加:ontouch=“true”

Opts:{
		legend:{
			show:false
		},
		padding: [10,0,0,0],
		dataLabel:false,
		dataPointShapeType:'hollow',
		yAxis: {data:[{fontColor:'#cccccc'}]},
		update:true,
		enableScroll: true,//开启图表拖拽功能
		scrollAlign:'left',//图表滚动条起始位置
		xAxis: {
				fontColor:'#cccccc',
				itemCount:3,//x轴单屏显示数据的数量,默认为5个
				scrollShow:true,//新增是否显示滚动条,默认false
		},
		extra:{line:{type:'curve',width:'3'}}
	},

 <qiun-data-charts :ontouch="true" background="none" type="column" :chartData="chartData" :opts="opts"/>

跟官方群里面联系后,突然发现我这个是组件,不能用原生的眼观去看待它,然后打算花钱去看组件在线工具了,记录自己傻的一刻,上面不改了,就当记录原来的写法了,说真的,uniapp写法的,还是去花钱开通组件在线编辑工具,文档真的麻烦

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值