新版本的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写法的,还是去花钱开通组件在线编辑工具,文档真的麻烦