在小程序中使用echarts,动态渲染echarts的拙见

hello,大家好 我是前端 钻石 青铜段位的阿乐,? 今天给大家带来的一篇自己的 笔记 主要是记录 echarts 在原生小程序开发工具中是如何使用的如何动态进行改变数据从而让echarts重新渲染? 话不多说开始了!!!!!!
如图这是引入的echarts一个线型图
动态渲染echarts 总的来说 分为 2个步骤,先说第一个步骤,在小程序原生开发工具中引入echarts(大佬们可以忽略这一步骤):
由于博主之前并没有怎么接触过echarts所以只能前往官网,看看官方爸爸的实例,实例上很好的介绍了echarts是如何引入的 咱们总结一下 其实只需要下载echarts在小程序中的组件包将其当成一个自定义组件来使用即可,在你需要使用的页面中写入ec-canvas标签,同时在对应的json文件中导入,最后到当前页面的js文件中 写上一个对应的实例 如图 这是一个简单的 折线图实例
在这里插入图片描述
实例的各种配置项 官网都有详细介绍的,这里就不多讲,值得注意的是 在js中首先需要import导入echarts的实例 还有就是在data数据中必须创建一个值ec(这里是随意取的变量名),ec等于一个对象 对象里是onint方法等于咱们上面创建的实例的方法名,同时页面中的ec-canvas标签里的 ec(固定的)属性必须等于咱们这个ec,这样便完整的创建了一个echarts实例了data中的ec变量
好?实例创建完成了 下面说说咱们今天的核心部分 动态改变echarts中的数据从而让echarts图标动态刷新。 说之前咱们先透个底,小小总结一下,其实动态改变echarts中的数据 原理无非就是父子组件的值的传递 方法的调用 。ec-canvas组件内部
咱们可以看到我这边是写了一个properties的属性,学过vue的同学都知道,vue中父往子组件传值时会涉及到一个props属性在子组件中用来存放父组件传递的值(不了解的同学可以看看这位博主的文章里面讲的很详细https://www.jianshu.com/p/f08c546fb5ed)咱们现在的这个properties的作用就和vue中的props属性 是一样的 ,那么咱们父组件在子组件标签中传输的值咱们拿到以后该干嘛怎么使用呢 请看下图
在这里插入图片描述
咱们找到ec-canvas文件的第69行 可以看到这里是在渲染echarts,调用了一个onInit方法这个方法是不是很眼熟呢没错就是咱们上面在父组件data中创建的变量里的key属性,看到这里相信 同学们已经恍然大悟了 这就是一个父组件往子组件传值,子组件再调用父组件的方法将子组件的值再次传递给父组件的实例中以形参接收即可
可以看到这和文章头部实例中参数的差别
如图,那此时想要动态改变数据就很简单了只需要改变父组件中往子组件传递的值就可以动态的改变echarts中的数据。当然再传递之后也是需要再去触发子组件中的渲染echarts的方法,让其视图实时更新。
注意点:参数的顺序很重要不能乱
好了,今天就说到这里了。以上皆是本人最近可以说是第一次接触echarts或者说是在小程序中使用echarts的一些总结,在这也希望抛砖引玉大家能提出更好的方法,同时指正我的不足。如果喷请轻喷哈哈哈,大佬们看看笑笑就好。

发布了5 篇原创文章 · 获赞 6 · 访问量 3419

猜你喜欢

转载自blog.csdn.net/weixin_43839002/article/details/89442621