echarts輪播效果 結合elementui跑馬燈
首先考慮的時將跑馬燈和echarts封裝到一個組件里 但是組件內部渲染數據的時候需要對數據進行處理
- 數據需要分割 例如一個echarts(柱狀圖)最大只能顯示11條數據
- 底部表格數據也需要分割處理
- echarts初始化init有問題
上面的方案沒有實現后,將echarts和表格封為組件,跑馬燈抽取到父組件里面,整體思路如下:
- 父組件對數據進行處理一個echarts顯示不開的時候對數據的分割 根據分割的段數(length)渲染跑馬燈卡片
- 父組件將分割好的數據的第n個傳到第n個卡片的echarts組件里
- echarts組件再對傳進來的數據進行處理
底部縱向表格實現
- element-ui只提供橫向表格 渲染出來每一行是一個數據對象
- 需要的數據進行單獨的處理