uni-app 使用uCharts-进行图表展示（折线图带单位）

前言

• 在uni-app经常是需要进行数据展示，针对这个情况也是有人开发好了第三方包，来兼容不同平台展示

• uCharts和pc端的Echarts使用差不多，甚至会感觉在uni-app使用uCharts更轻便，更舒服

• 但是这个第三方包有优点就会有缺点，还会有坑的地方下面我会一一讲解

uCharts使用-注意事项-和避坑

• 首先我们在hb插件市场下载这个包时可能需要看一段广告......

• 官方文档确实写的很清楚也很多，稍微适应一下就行了。但在线调试和定制需求是需要收费的

• 这个组件在uni-app使用时，会受到定位，子绝父相，固定定位，隐藏等css属性影响，会导致显示正常，但是点击数据是没反应的，并且数据弹出框也是显示不出来的

• 关于这个网上是说加一个canasid等，但并没有大作用，改源码的话不建议删代码，建议往上加

• 在页面使用时，建议把每一个图标封装成全局组件（组件长宽100），在页面直接使用。

• 每个图标padding属性很重要它可以是负值，从上 右 下 左 来帮助我们在父组件矫正布局

• uCharts在示例里面各种图形数据格式-包括标题等，都不能修改它，只能像他看齐

• x，y 轴单位x轴直接生效，y轴是需要开启才会生效，注意看文档

uCharts包地址

插件市场地址：秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

包文档地址：uCharts官网 - 秋云uCharts跨平台图表库

代码实现

1.来到插件市场-下载插件导入HBuilderX

2.来到全局组件components文件-右键新建组件-创建同名目录（很重要）创建scss命名failure-rate

代码如下-查看官方文档-注意宽高-100-使用父组件宽高

​

3.来到父组件使用-因为我们组件符合小程序规范-不用注册直接使用-代码如下

4.调用接口传递真实数据-在子组件侦听传递过来的数据进行操作

---

总结：

经过这一趟流程下来相信你也对 uni-app 使用uCharts-进行图表展示（折线图带单位） 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕