echarts轮播效果 结合elementui跑马灯
首先考虑的时将跑马灯和echarts封装到一个组件里 但是组件内部渲染数据的时候需要对数据进行处理
- 数据需要分割 例如一个echarts(柱状图)最大只能显示11条数据
- 底部表格数据也需要分割处理
- echarts初始化init有问题
上面的方案没有实现后,将echarts和表格封为组件,跑马灯抽取到父组件里面,整体思路如下:
- 父组件对数据进行处理一个echarts显示不开的时候对数据的分割 根据分割的段数(length)渲染跑马灯卡片
- 父组件将分割好的数据的第n个传到第n个卡片的echarts组件里
- echarts组件再对传进来的数据进行处理
底部纵向表格实现
- element-ui只提供横向表格 渲染出来每一行是一个数据对象
- 需要的数据进行单独的处理