ECharts/Vue–（插件）tooltip显示自动播放与列表无缝滚动

记录一次大屏业务

本篇需要完成的内容：
1、ECharts的 tooltip 显示自动播放
2、Vue中使用 vue-seamless-scroll.js 做列表无缝滚动

1. ECharts 的 tooltip 显示自动播放

• 效果

  

  tooltip 显示自动播放.gif

• 安装插件

  • 有插件用，自己就不写了，官网也是有方法的，插件做了封装

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

  • 使用（直接复制插件官方的使用文档）：

  1.引入ehcrts-auto-tooltips
  
  
  2.在初始化 echarts 实例并通过 setOption 方法生成图表的代码下添加如下代码
  myChart.setOption(option);
  tools.loopShowTooltip(myChart, option, {loopSeries: true}); // 使用本插件
  

  • 参数：

    

    参数.png

2. vue中实现列表无缝滚动

• 效果

  

  列表滚动.gif

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

• 下载插件

npm install vue-seamless-scroll --save

• 引入

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

• 页面中使用

  

  html

// computed 中 参数配置
computed: {
            classOption() {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    singleHeight: 26,
                    // isSingleRemUnit:true,
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        },

• 使用中的一些问题

> 问：列表滚动不连贯的问题，不是无缝的情况
> 答：给循环的内容加行高，如：给seamless-warp加行高
.seamless-warp {
   width: 100%;
   height: calc(100% - 80px);
   line-height: 45px;
   overflow: hidden;
}

3. 结束

over!

点个赞呗！