uniapp之 对ucharts图表的使用

200 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第13天,点击查看活动详情

 前言

因项目的需求,需要在小程序uniapp 的项目中渲染一个折线图,因此在搜索图表的时候发现了ucharts这个插件,最开始以为很简单,谁知,困扰我好几天

使用

1.查看官网

查看官网后,你会发现,很简单,就直接照着官网的提示、步骤来做就行了。

​编辑

当我真正的把代码C完后,去运行的时候发现,图表不出来,这个问题,困扰了我一段时间,但最终在官网的常见问题中发现解决方法,

​编辑

问题一 

 父组件  current === 1

​编辑

 ​编辑

子组件  current === 0 

​编辑

 这里会有个疑问 为啥 在父组件中 current === 1 ,而在子组件里面设置为0,放心,这个我试过,0跟1 都可以使用

问题 二

虽说使用 reshow的方法,切换的时候图表按理说,是能显示出来的,但 最开始显示的是一个 图片,只有当你点击那个图片之后,图表才能显示出来,那这样岂不是给用户带来很不好的体验感吗,毕竟只想直接查看,不想点击查看

那这个方法,就需要在父组件的 data 里定义 current :1,一来就展示图表,就不用考虑还需要点击才出来的问题了

补充点

组件中的

onReady() {
    this.getServerData();
  },


要改为 

在 mounted 里 发送这个请求