更新记录

1.9.1(2019-08-21)

新增第二种仪表盘样式

  • [x] 2019.08.21 新增 第二种仪表盘样式progress,增加【uCharts 跨端图表改造教程】
  • [x] 2019.08.20 修复 不能隐藏Y轴的bug。
  • [x] 2019.08.20 修复 单个Y轴时,开启标题并且标题不给字体大小的情况下,图表绘制失败的bug。
  • [x] 2019.08.20 修复 混合图不传Y轴data的情况下绘图失败的问题。
  • [x] 2019.08.19 【v1.9.1】
  • [x] 2019.08.19 新增 opts.series.lineType 折线图,折线为虚线或实线的配置:'solid'为实线、'dash'为虚线,仅针对line,area,mix有效。
  • [x] 2019.08.19 新增 开启滚动条时,滚动到尽头的的事件:scrollLeft为拖动到最左侧时,scrollRight为拖动到最右侧时,详见混合图demo。
  • [x] 2019.08.19 新增 opts.extra.tooltip.showBox,是否显示ToolTip方框及文字(一般用于只显示横向或纵向的辅助线)。
  • [x] 2019.08.19 修复 X轴开启文案旋转时,Y轴左侧区域遮挡文案的bug。
  • [x] 2019.08.18 修复 开启滚动条后,点击图例隐藏类别后导致滚动条复位闪屏的bug。

1.9.0 Beta(2019-08-18)

新增多Y轴图表,支持全部直角坐标系图表类型,新增地图map图表

  • [x] 2019.08.18 【v1.9.0 Beta】
  • [x] 2019.08.18 新增 【重要】支持多Y轴图表,增加opts.yAxis.data一系列参数,用于多坐标系的调用方法,数据类型为数组格式
  • [x] 2019.08.18 新增 opts.xAxis.axisLineopts.xAxis.axisLineColor,提供绘制X轴轴线的功能。
  • [x] 2019.08.18 取消 opts.xAxis.type。
  • [x] 2019.08.18 新增 opts.xAxis.calibration 是否绘制X轴刻度,用于X轴刻度和网格不能同时绘制的问题。
  • [x] 2019.08.18 修复 漏斗图点击效果阴影透明度不正确的bug。
  • [x] 2019.08.15 修复 仪表盘数据更新后不能从当前位置开始动画的bug。
  • [x] 2019.08.15 修复 玫瑰图面积模式中百分比计算错误的bug。
  • [x] 2019.08.14 修复 饼图类百分比计算精度导致小数位数增多,不显示图表的bug。
  • [x] 2019.08.14 修复 柱状图数值差距比较大的情况下,小数值完全不显示柱子的bug。
  • [x] 2019.08.14 修复 玫瑰图最大值最小值计算错误导致图表显示错误的bug。
  • [x] 2019.08.13 【v1.8.5】
  • [x] 2019.08.13 新增 词云图动画效果及点击事件。
  • [x] 2019.08.13 新增 地图点击事件及tooltip。
查看更多

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

uCharts官方网站

https://www.ucharts.cn

码云gitee开源地址

小伙伴们,需要star哦~~~

在线文档(参数在API章节)

在线文档(备用地址)

QQ交流群:371774600

口令【uniapp

快速体验

一套代码编到7个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!IOS因demo比较简单无法上架,请自行编译。

更新记录

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

  • [ ] 2019.08.xx 计划加入 渐变颜色填充 功能,支持柱状图、区域图、混合图、圆弧进度条
  • [ ] 2019.08.xx 计划修复折线图样式为曲线时,个别情况下曲线超出 X 轴的问题。

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

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

支持图表类型

  • 饼图 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动画效果。
  • 独特支持横屏模式感谢masterLi提供需求。

为何不用Echarts?

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

uni-app图表选型参考流程

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

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

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

【uCharts 跨端图表改造教程】

图表示例

常见问题

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

通用问题

  • 如果用在您的项目上图表不显示,请先运行demo页面,如果demo页面也无法显示,请查看全局样式是否定义了canvas的样式,如有请取消。
    • 图表背景颜色问题,很多朋友设置图表背景颜色时候,只修改了view和canvas的css,忘记了修改实例化参数中的background:'#FFFFFF',导致图表画板右侧有一道白条(这个是图表配置中的右边距),所以特修改了demo中的柱状图的背景颜色供大家参考。
    • 如果遇到图表与预期尺寸不符合,请检查canvas标签上的csscWidth、cHeihgt设置的值是否相符,css请用rpx为单位,cWidth、cHeihgt的单位为px,请参考demo用uni.upx2px()方法转换。
    • 如遇到开启拖拽,而实际无法拖拽的情况,请先检查canvas标签是否绑定的touch事件
    • 如果涉及到v-if切换显示图表组件,第二次可能会变空白,建议用v-show替代v-if切换显示图表组件。

头条问题

  • 头条小程序目前不支持拖拽事件,后续官方支持的话,不必更换js文件,直接可用。

支付宝问题

  • 在高分屏模式下,如果发现图表已显示,但位置不正确,请检查上级 view 容器的 样式
  • 为了解决高分屏模糊问题,需要在canvas标签定义width、height和style属性来控制canvas的缩放来达到匹配高分屏,具体逻辑为width、height的数值应为图表根据pixelRatio的比例放大后的尺寸,而style的尺寸为屏幕的宽和高(并非真实物理像素点)例如:
    width="750" height="500" style="width:750rpx;height:500rpx;"。

隐私、权限及商业化声明

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

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

模拟图表数据后台地址:https://www.ucharts.cn/data.json 如运行到小程序,请添加此域名为合法域名,或取消校验合法域名

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

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