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

最新推荐文章于 2024-12-30 14:00:42 发布

ywh-愿来

最新推荐文章于 2024-12-30 14:00:42 发布

阅读量2k

点赞数 1

文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/yh_hh/article/details/120307138

版权

该博客介绍了如何在Vue项目中使用vue-seamless-scroll组件实现表格数据的无缝滚动，并结合ECharts进行动态数据的可视化展示。在切换表格时，需要注意重新销毁和重建DOM节点以避免出现bug。示例代码展示了如何加载和配置vue-seamless-scroll，以及如何根据数据生成ECharts图表，包括数据处理和样式调整。同时，还涉及到数据的动态更新和ECharts图表的初始化及渲染方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

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

npm install vue-seamless-scroll --save

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

<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

最低0.47元/天解锁文章