使用vue-seamless-scroll 无限滚动echarts横向柱状图

效果图

1. 标题table栏可以切换，这里就不上代码了，切换的时候需要重新销毁和重建一下dom节点，否则会出现bug，使用这个插件的时候需要注意一下dom节点的问题
2. 首先需要装一下 这个插件
3. 可以看一下插件的文档
   ：https://chenxuan0000.github.io/vue-seamless-scroll/guide/

npm install vue-seamless-scroll --save

4. 主要代码：样式根据自己需求调整，请求接口请换成自己的，根据数据处理

<template>
  <div>
    <div class="item">
      <div class="title">
        <span>{{ title }}</span>
        <span>{{ num }}<span style="fontSize:18px">{{ unit }}</span></span>
      </div>
      <vue-seamless-scroll :data="list" :class-option="classOption" id="warp" class="warp" v-if="isShow">
        <div class="ech_situation"></div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { subsidyDetail } from '@/api/cockpit'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    cockpitTitle,
    vueSeamlessScroll
  },
  // 定义属性
  data() {
    return {
      num: 0,
      isShow: true,
      unit: '万人',
      list: [],
      type: 1,
      classOption: {
        singleHeight: 50,
        waitTime: 0
      },
      data: [],
      title: '',
      total: []
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async change(type) {
      this.isShow = false
      await this.getData(type)
      this.isShow = true
      setTimeout(() => {
        document.querySelectorAll('.ech_situation').forEach(dom => {
          this._subsidyDetail(dom)
        })
      }, 0)
    },
    async getData(type) {
      const res = await subsidyDetail()
      this.data = []
      this.list = res.data.details
      if (type === 2) {
        this.list.forEach(i => {
          this.data.push({
            name: i.projectName,
            value: i.pay || 0,
            type: '万元'
          })
        })
        this.title = '支出总资金'
        this.unit = '万元'
        this.num = res.data.totalPay
        this.total = [5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000]
      } else {
        this.title = '惠及总人数'
        this.num = res.data.totalPersonTime
        this.unit = '万人'
        this.total = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
        this.list.forEach(i => {
          this.data.push({
            name: i.projectName,
            value: i.personTime || 0,
            type: '万人'
          })
        })
      }
    },
    _subsidyDetail(dom) {
      const myChart = echarts.init(dom)
      const nameList = this.data.map(i => i.name)
      var data = this.data
      // this.num = this.data.map(i => i.ren).reduce((total, item) => item + total)
      this.num = this.data.map(i => i.value).reduce((total, item) => item + total)
      this.num = this.num.toFixed(1)
      var list = this.data.map(i => i.value)
      myChart.setOption({
        grid: {
          top: '2%',
          bottom: 0,
          right: 10,
          left: 0
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            show: true,
            // inverse: true,
            data: nameList,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              color: '#fff',
              align: 'left',
              margin: 80,
              fontSize: 28,
              formatter: function(value, index) {
                return '{title|' + value + '}'
              },
              rich: {
                title: {
                  width: 165
                }
              }
            }
          },
          {
            show: true,
            data: nameList,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              // shadowOffsetX: '-20px',
              color: ['#fff'],
              align: 'right',
              verticalAlign: 'bottom',
              lineHeight: 30,
              padding: [0, 10, 0, 0], // 看这
              fontSize: 20,
              formatter: function(value, index) {
                return data[index].value + data[index].type
              }
            }
          }
        ],
        series: [
          {
            name: '外框',
            type: 'bar',
            barGap: '-65%', // 设置外框粗细
            data: this.total,
            barWidth: 12,
            itemStyle: {
              normal: {
                barBorderRadius: 4,
                color: 'transparent', // 填充色
                barBorderColor: '#1588D1', // 边框色
                barBorderWidth: 1 // 边框宽度
              }
            },
            z: 0
          },
          {
            name: '条',
            type: 'bar',
            // showBackground: true,
            // yAxisIndex: 0,
            data: list,
            barWidth: 4,
            // align: left,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    ['#F2B73D', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff'],
                    ['#75CCFD', '#fff']
                  ]
                  var colorItem = colorList[params.dataIndex]
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    [
                      {
                        offset: 0,
                        color: colorItem[0]
                      },
                      {
                        offset: 0.9,
                        color: colorItem[0]
                      },
                      {
                        offset: 1,
                        color: colorItem[1]
                      }
                    ],
                    false
                  )
                }
              }
            },
            label: {
              normal: {
                color: 'rgba(255,255,255,0.8)',
                show: true,
                position: [0, '-25px'],
                padding: [0, 0, 0, 3], // 看这
                textStyle: {
                  fontSize: 20
                },
                formatter: function(a, b) {
                  return a.name
                }
              }
            }
          }
        ]
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    await this.getData(1)
    setTimeout(() => {
      document.querySelectorAll('.ech_situation').forEach(dom => {
        this._subsidyDetail(dom)
      })
    }, 0)
  },
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.item {
  width: 100%;
  .title {
    height: 65px;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    :first-child {
      opacity: 0.6;
      font-size: 20px;
    }
    :nth-child(2){
      font-size: 28px;
      margin-left: 13px;
    }
    :nth-child(3){
      font-size: 18px;
    }
  }
  .ech_situation {
    height: 700px;
  }
}
.warp {
  height: 250px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
</style>