一.Ucharts
1.改造后的插件可以跨端使用,支持H5,小程序(微信/支付宝/百度/头条),APP,调用简单方便性能及体验极佳。
2.虽然没有Echarts图表功能强大,但可以实现一套业务逻辑各端通用,并解决了支付宝小程序图表显示模糊问题。
3.支持单页面多图表,demo中单页10个图表,响应速度超快。
4.支持入场动画及ToolTip动画效果
5.独特支持横屏模式。
二.为何不用Echarts
1.相比Eachrts及复杂的配置,Ucharts几乎等于傻瓜式的配置
2.Eachrts在跨端使用更复杂,Ucharts只需要简单的两个<canvas>
标签轻松区别搞定,代码整洁易维护。
3.Echarts在IOS端图表显示错位,只能引用网页解决
4.Ucharts打包后的体积相比Echarts小很多很多,所以性能更好
5.图表样式均可自定义,懂js的都可以读懂插件源码,直接修改wxcharts.js源码即可。
三.Ucharts的使用
在上一篇文章已经讲过了Echarts的用法,今天来浅谈一下Ucharts的用法及一些简单的配置。
使用第三放插件肯定要进行下载:uCharts高性能跨全端图表
如,我想把这张图修改成饼状图。
然后将更新的代码复制粘贴到配置项里面就可以了。诸如这类的配置还有很多例如
修改图例:
修改提示窗:
可以进行任意的配置
{"categories": ["2016","2017","2018","2019","2020","2021"],"series": [{"name": "目标值","data": [35,36,31,33,13,34]},{"name": "完成量","data": [18,27,21,24,6,28]}]
}
X轴的配置区域
如果不写就会根据你页面的数据来自动生成。
data里面的每一个数据,都代表横着的每一个数据。下一个data又代表里面的每一项数据。
关于Y轴的配置问题:
Y轴的数据,关于这个问题,我在配置表格的时候,本想配置Y轴,观察完之后
并没有发现相关的配置于是我打开全局文件搜索,里面对应坐标的数组,任然是没有任何的响应。
这个时候我就很奇怪,那上边的数值是哪里来的,突然我发现,最高点和我对应的数值的最高点是一样的,最低点是不一样的。这里面所谓的最高点和最低点指的40,5。观察data里面的两组数据你可以发现,最大的是36,最小的是5。
现在我门进行修改里面的值将最大值36------------>56 ,最小的6------------>11。
与之对应的是:
关于配置还有很多建议参考官方网站进行配置。