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