echarts轮播效果 结合elementui跑马灯


echarts轮播效果 结合elementui跑马灯

首先考虑的时将跑马灯和echarts封装到一个组件里 但是组件内部渲染数据的时候需要对数据进行处理

  • 数据需要分割 例如一个echarts(柱状图)最大只能显示11条数据
  • 底部表格数据也需要分割处理
  • echarts初始化init有问题

上面的方案没有实现后,将echarts和表格封为组件,跑马灯抽取到父组件里面,整体思路如下:

  • 父组件对数据进行处理一个echarts显示不开的时候对数据的分割 根据分割的段数(length)渲染跑马灯卡片
  • 父组件将分割好的数据的第n个传到第n个卡片的echarts组件里
  • echarts组件再对传进来的数据进行处理

底部纵向表格实现

  • element-ui只提供横向表格 渲染出来每一行是一个数据对象
  • 需要的数据进行单独的处理


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM