记录一次大屏业务
本篇需要完成的内容：
1、ECharts的 tooltip 显示自动播放
2、Vue中使用 vue-seamless-scroll.js 做列表无缝滚动
1. ECharts 的 tooltip 显示自动播放
-
效果
tooltip 显示自动播放.gif -
安装插件
有插件用，自己就不写了，官网也是有方法的，插件做了封装
使用（直接复制插件官方的使用文档）：
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}); // 使用本插件-
参数：
参数.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!
点个赞呗！
