記錄一次大屏業(yè)務

本篇需要完成的內(nèi)容：
1、ECharts的 tooltip 顯示自動播放
2、Vue中使用 vue-seamless-scroll.js 做列表無縫滾動

1. ECharts 的 tooltip 顯示自動播放

• 效果

  
  
  tooltip 顯示自動播放.gif

• 安裝插件

  • 有插件用，自己就不寫了，官網(wǎng)也是有方法的，插件做了封裝

  • 下載地址：echarts-auto-tooltip.js

  • 使用（直接復制插件官方的使用文檔）：

  1.引入ehcrts-auto-tooltips
  <script type="text/javascript" src="js/echarts-auto-tooltip.js"></script>
  
  2.在初始化 echarts 實例并通過 setOption 方法生成圖表的代碼下添加如下代碼
  myChart.setOption(option);
  tools.loopShowTooltip(myChart, option, {loopSeries: true}); // 使用本插件
  

  • 參數(shù)：

    
    
    參數(shù).png

2. vue中實現(xiàn)列表無縫滾動

• 效果

  
  
  列表滾動.gif

• 地址及使用文檔
  中文文檔

• 下載插件

npm install vue-seamless-scroll --save

• 引入

// main.js
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

• 頁面中使用

  
  
  html

// computed 中 參數(shù)配置
computed: {
            classOption() {
                return {
                    step: 0.2, // 數(shù)值越大速度滾動越快
                    singleHeight: 26,
                    // isSingleRemUnit:true,
                    limitMoveNum: 2, // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length
                    hoverStop: true, // 是否開啟鼠標懸停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom
                    singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1
                    singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3
                    waitTime: 1000 // 單步運動停止的時間(默認值1000ms)
                }
            }
        },

• 使用中的一些問題

> 問：列表滾動不連貫的問題，不是無縫的情況
> 答：給循環(huán)的內(nèi)容加行高，如：給seamless-warp加行高
.seamless-warp {
   width: 100%;
   height: calc(100% - 80px);
   line-height: 45px;
   overflow: hidden;
}

3. 結(jié)束

over!

點個贊唄！