![15b09eda6b0312a158d268fd7603f8a6.png](https://i-blog.csdnimg.cn/blog_migrate/f0a8527a5c70ede1b3f780249d4fa919.jpeg)
uCharts高性能跨平台图表库,支持H5图表、APP图表、小程序图表(微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序、360小程序),支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、地图。
![b1a7d7e06bbf850d5acb9575d4b18446.png](https://i-blog.csdnimg.cn/blog_migrate/daf0f1d172cf0829a162a64cc70edc43.jpeg)
一套代码编到7个平台
在uni-app里面会使用到统计图,和echarts类似,因为经常有用到uni-app开发一些app和小程序相关的项目,也经常用到图表相关的插件,推荐ucharts给大家,个人感觉还是不错的,种类多也比较完善,
支持图表类型
- 饼图 pie
- 圆环图 ring
- 线图 line(直线、曲线)
- 柱状图 column(分组、堆叠、温度计)
- 区域图 area(直线、曲线)
- 雷达图 radar
- 圆弧进度图 arcbar
- 仪表盘 gauge
- K线图 candle
- 混合图 mix(支持 Point、Line 直线曲线、Column、Area 直线曲线)
- 玫瑰图 rose(面积模式、半径模式)
- 词云图 word(横向、横纵混排)
- 漏斗图 funnel
- 地图 map
插件特点
- 改造后的插件可以跨端使用,支持 H5、小程序(微信/支付宝/百度/头条/QQ/360)、APP,调用简单方便、性能及体验极佳。
- 虽然没有 Echarts 及 F2 图表功能强大,但可以实现一套业务逻辑各端通用,并解决了支付宝小程序图表显示模糊等问题。
- 支持单页面多图表,demo 中单页 10 个图表,响应速度超快。
- 支持入场动画及 ToolTip 动画效果。
- 独特支持 横屏模式。
为何不用 Echarts?
- 相比 Echarts 及 F2 的复杂的设置,本插件几乎等于傻瓜式的配置。
- Echarts 在跨端使用更复杂,本插件只需要简单的两个 标签轻松区别搞定,代码整洁易维护。
- Echarts 在 iOS 端图表显示错位,只能引用网页解决。
- 本插件打包后的体积相比 Echarts 小很多很多,所以性能更好。
- 如果您是 uni-app 初学者,那么强烈建议您使用 uCharts,并且目前可以跨全端通用,减少工作量,增强一致性体验。
- 图表样式均可自定义,懂 JS 的都可以读懂插件源码,直接修改 u-charts.js 源码即可。
- 本插件经过大量测试,反复论证并加以改造而成,请各位放心使用。
快速上手
![38099922eef2d11973902fda95579889.png](https://i-blog.csdnimg.cn/blog_migrate/495ac9f0b2bd5e9a9355b7fb4aca034d.jpeg)
使用方法
代码示例:
柱状图
本人在uni-app小程序写的图表:
![48bdf9aedd68c08eb69306cca610ece6.png](https://i-blog.csdnimg.cn/blog_migrate/8c6da6181a8650079efdb9234ecd364f.jpeg)
线图统计图表
总结
uCharts在小程序端使用起来真的很方便的,几乎能满足我们所有的图表要求,确实比echarts好用的多,大家怎么看呢?