两种方法滚动横向进度条图表

滚动的横向进度条图表

效果：

被遮掉的是商品名，问题不大

一.直接写

1. 滚动使用vue-seamless-scroll插件实现,可以查看该插件的说明文档

2. 然后写图表，层次通过ul和li标签实现

3. 写进度条，通过两个div块实现，一个用来显示当前量，一个当做进度条的底色背景

代码：

class bar1中的那一小点代码就是进度条根据数值显示不同进度的代码（那个百分之95是我为了不让进度条顶到div最大宽度添的，可以无视）

<div class="row">
            <vue-seamless-scroll :class-option="optionSetting" :data="dataSource" class="wrap">
                <ul>
                    <li :key="index" v-for="(item, index) in dataSource">
                    <div class="r1">
                        <!-- <div>LEFT</div> -->
                        <div class="num">NO.{
  { index+1 }}</div>
                        <div class="name">{
  { item.name }}</div>
                        <div class="sal">销量：{
  { item.sal }}</div>
                    </div>
                    <div class="bar1" v-bind:style="{'width': `${(item.sal/max) * 95}%`}"></div>
                    <div class="bar2"></div>
                        
                    
                    </li>
                </ul>
            </vue-seamless-scroll>
            </div>

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