swiper插件实现echarts轮播的解决方案

简介: swiper插件实现echarts轮播的解决方案

引入外部js

<!-- 轮播swiper文件 -->
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>


HTML代码

<div class="swiper-container visual_swiper2 visual_chart">
          <div class="swiper-wrapper">
            <div class="swiper-slide"  id="main4"></div>
            <div class="swiper-slide"  id="main41"></div>
          </div>
        </div>


JS代码

    var mySwiper2 = new Swiper('.visual_swiper2', {
    autoplay: true,//可选选项,自动滑动
    direction : 'vertical',//可选选项,滑动方向
    speed:2000,//可选选项,滑动速度
  })


一定要注意设置好图表的高度,否则会显示不出来。

Done!

相关文章
|
容器
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
216 0
|
数据可视化 搜索推荐 前端开发
漏刻有时数据可视化Echarts组件开发(16):乡镇街道下辖村级或社区级别的行政区域边界轮廓划分的svg解决方案
漏刻有时数据可视化Echarts组件开发(16):乡镇街道下辖村级或社区级别的行政区域边界轮廓划分的svg解决方案
312 0
|
3月前
uniApp——调整uniApp插件市场上的echarts插件
uniApp——调整uniApp插件市场上的echarts插件
130 0
|
4月前
echarts 自动轮播
echarts 自动轮播
96 0
|
4月前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
594 0
|
数据可视化
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
132 1
漏刻有时数据可视化Echarts组件开发(19):树图tree构建环绕圆的解决方案
|
6月前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
数据可视化
漏刻有时数据可视化Echarts组件开发(17):环图显示设备状态正常故障的解决方案
漏刻有时数据可视化Echarts组件开发(17):环图显示设备状态正常故障的解决方案
93 0
|
数据可视化
漏刻有时数据可视化Echarts组件开发(16):map3D实现360连续旋转的解决方案
漏刻有时数据可视化Echarts组件开发(16):map3D实现360连续旋转的解决方案
105 0
|
6月前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
496 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案

热门文章

最新文章