喜讯!《uCharts高性能跨全端图表》荣获插件大赛一等奖,感谢DCloud以及mpvue团队的鼓励和认可!感谢各位开发者的问题反馈和赞赏!uCharts团队一定会不负众望,为大家打造完美、方便、高性能的图表而奋斗!再次感谢!

如遇到问题,请先参见页面最后章节【常见问题】解决,如没有您的问题,请在页面最下面【撰写评论】。几星不重要,重要的是解决您的问题。再次感谢您的支持与鼓励!!

新增右侧图例写法,因1.0版本是不支持右侧图例的,可以通过其他方法变通实现,详见在线文档(饼图示例)

新增饼图圆环图ToolTip(注lableWidth写法不兼容之前版本,请按新版本demo修改您之前的代码)。

修复黑边bug,增加tooltip自定义设置,增加tooltip水平横线及标签显示,详见K线图candle.vue(K线缩放功能正在完善,目前仍有问题)

uCharts高性能跨全端图表

  • 适用于uni-app平台的跨全端图表插件,顾名uCharts
  • 基于wx-charts微信小程序图表改造成,感谢原作者xiaolin3303
  • 原插件gitHub地址:https://github.com/xiaolin3303/wx-charts

uCharts官方网站

  • https://www.ucharts.cn(已注册,备案中,现无法访问)
  • 后续将在官网提供在线示例及参数说明指引等,以帮助大家方便使用。

QQ交流群:371774600

在线文档(参见API章节)(其他说明完善中)

在线文档(参见API章节)(其他说明完善中)

在线文档(参见API章节)(其他说明完善中)

快速体验

一套代码编到7个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!

IOS因demo比较简单无法上架,请自行编译;百度小程序和头条小程序审核较严格,可能一时半会不能上线了,大家可以暂时在小程序IDE中自行编译测试。

更新记录

未来计划(V1.0至2.0版本)

  • [ ] 2019.xx.xx 计划太多~~轮子不好造啊~~
  • [ ] 2019.08.xx 计划搭建uCharts官方网站,以供初学者快速上手uCharts
  • [ ] 2019.07.xx 计划重建各端demo,以供初学者快速上手uCharts
  • [ ] 2019.07.xx 计划加入雷达图等ToolTip事件
  • [ ] 2019.06.xx 计划加入组件内使用示例
  • [ ] 2019.06.xx 计划加入条状图分时图
  • [ ] 2019.06.xx 计划加入渐变颜色填充功能
  • [ ] 2019.05.xx 推迟计划加入第二种仪表盘样式,增加《亲手教您如何改造uCharts,打造您的专属图表》教程。
  • [ ] 2019.05.xx 计划修改X轴刻度标签抽稀策略,以适应K线图及不需要文案旋转的需求
  • [ ] 2019.05.xx 计划加入辅助线(标记线)功能,支持柱状图、折线图、区域图、K线图
  • [ ] 2019.05.xx 完善K线图及其辅助功能。
  • [ ] 2019.05.xx 计划修复折线图样式为曲线时,个别情况下曲线超出x轴的问题。

未来计划(全新V2.0版本)

2019.5.20重要又浪漫的日期,uCharts团队正式建立了,我们将以追求极致、追求完美的极客精神来打造uCharts。uCharts2.0版本正在前期策划中,将以全新结构重写uCharts,支持多Y轴、多X轴、自定义图例位置、以及更多图表类型,请各位敬请期待。

支持图表类型

  • 饼图 pie
  • 圆环图 ring
  • 线图 line(直线、曲线)
  • 柱状图 column(分组、堆叠、温度计)
  • 区域图 area(直线、曲线)
  • 雷达图 radar
  • 圆弧进度图 arcbar
  • 仪表盘 gauge
  • K线图 candle(完善中)
  • 条状图 bar(开发中)
  • 混合图 mix(支持point、line直线曲线、column、area直线曲线)

插件特点

  • 改造后的插件可以跨端使用,支持H5、小程序(微信/支付宝/百度/头条)、APP,调用简单方便、性能及体验极佳。
  • 虽然没有Echarts及F2图表功能强大,但可以实现一套业务逻辑各端通用,并解决了支付宝小程序图表显示模糊等问题。
  • 支持单页面多图表,demo中单页10个图表,响应速度超快。
  • 支持入场动画及ToolTip动画效果。
  • 独特支持横屏模式感谢masterLi提供需求。

为何不用Echarts?

  • 相比Echarts及F2的复杂的设置,本插件几乎等于傻瓜式的配置。
  • Echarts在跨端使用更复杂,本插件只需要简单的两个<canvas>标签轻松区别搞定,代码整洁易维护。
  • Echarts在IOS端图表显示错位,只能引用网页解决。
  • 本插件打包后的体积相比Echarts小很多很多,所以性能更好。
  • 如果您是uni-app初学者,那么强烈建议您使用uCharts,并且目前可以跨全端通用,减少工作量,增强一致性体验。
  • 图表样式均可自定义,懂js的都可以读懂插件源码,直接修改wxcharts.js源码即可。
  • 本插件经过大量测试,反复论证并加以改造而成,请各位放心使用。

uni-app图表选型参考流程

亲手教您如何改造uCharts,打造您的专属图表

  • 为何要改造uCharts?
  • 并不是所有图表插件直接拿来就可以满足客户需求,如果您的UI设计师设计一个图表,如下图:

  • 您会发现这个图表即使在echarts里也不是很好实现,那么就需要我们自己动手去实现。下面就让我们一起来完成,本文旨在抛砖引玉,希望各位朋友能够更好的应用uCharts来完成您的项目,如果您有更好的设计,请提交您的PR到githubuCharts跨端图表,帮助更多朋友,感谢您的付出及贡献!

uCharts跨端图表改造教程(暂未完成,请关注)

图表示例

常见问题

各位遇到问题请先参考以下问题,如果仍不能解决,请留言。

通用问题

  • 如果用在您的项目上图表不显示,请先运行demo页面,如果demo页面也无法显示,请查看全局样式是否定义了canvas的样式,如有请取消。
  • 如发现实例化图表后,客户端卡死的状况,请在实例化图表前(即调用showColumn(canvasId,chartData)前)检查传入图表数组(chartData.categorieschartData.series)是否为空,如果为空则不要实例化图表。后续将在源码中解决此问题。
  • 图表背景颜色问题,很多朋友设置图表背景颜色时候,只修改了view和canvas的css,忘记了修改实例化参数中的background:'#FFFFFF',导致图表画板右侧有一道白条(这个是图表配置中的右边距),所以特修改了demo中的柱状图的背景颜色供大家参考。

支付宝、百度、头条问题

  • 在高分屏模式下,如果发现图表已显示,但位置不正确,请检查上级view容器的样式,为了解决高分屏canvas模糊问题,使用了css的transform,所以请修改上级样式使canvas容器缩放至相应位置。
  • 如果将canvas放在多级组件下,遇到ToolTip不显示或点击区域不正确,请在touch事件中增加以下代码解决。
    //#ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
    e.mp.currentTarget.offsetTop+=uni.upx2px(510);
    //#endif

    uni.upx2px(510);是canvas组件的上级组件的高度

组件问题

  • 很多小伙伴们自行把本插件做成组件来调用,做成组件需要注意,如果涉及到v-if切换显示图表组件,第二次可能会变空白,这里有两个建议: 1、建议用v-show替代v-if切换显示图表组件。 2、建议参考demo,不要将canvas做到组件里使用,即直接写在主页面中。

    初步解决组件内使用问题,感谢342805357@qq.com提出组件问题解决方案,增加opts.$this参数,组件使用时实例化前请传递this。后续会增加组件使用示例,请关注。

支付宝小程序IDE中不显示,但运行到真机是可以显示的,请真机测试。

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

模拟图表数据后台地址:https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata 如运行到小程序,请添加此域名为合法域名,或取消校验合法域名

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问