swiper + echarts实现多个仪表盘左右滚动效果

最新推荐文章于 2022-11-16 17:49:50 发布
最新推荐文章于 2022-11-16 17:49:50 发布
阅读量1.6k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caimaomaocai/article/details/88093800
版权

1、swiper的使用

a.首先加载插件，

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

b.HTML内容。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 
    <div class="swiper-pagination"></div>-->
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 
    <div class="swiper-scrollbar"></div>-->
</div>

c.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
    width: 600px;
    height: 300px;
}

d.初始化Swiper：最好是挨着</body>标签

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

 

 

下面是我要实现的效果

 

代码如下

加载插件和样式

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
<style>
        *{
            margin:0;
            padding:0;
        }
        .swiper-container{
            height:200px;
            width:800px;
            margin:0 auto;
            border:1px solid #ccc;
        }
        .swiper-slide{
            display:flex;
        }
        .swiper-slide .chart{
            flex:1;
        }

    </style>
</head>
<body>
    ...
<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

html结构

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="chart" id="chart1">1</div>
            <div class="chart" id="chart2">2</div>
            <div class="chart" id="chart3">3</div>
        </div>
        <div class="swiper-slide">
            <div class="chart" id="chart4">4</div>
            <div class="chart" id="chart5">5</div>
            <div class="chart" id="chart6">6</div>
        </div>
        <div class="swiper-slide">
            <div class="chart" id="chart7">7</div>
            <div class="chart" id="chart8">8</div>
            <div class="chart" id="chart9">9</div>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

初始化swiper

var mySwiper = new Swiper('.swiper-container', {
        autoplay: {
            delay:5000
        },//可选选项，自动滑动\
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })

初始化echarts

function initChart(obj){
          var myChart = echarts.init(document.getElementById(obj));

          var option = {
              tooltip : {
                  formatter: "{a} <br/>{b} : {c}%"
              },
              series: [
                  {
                      type : "gauge",
                      center: ["50%", "50%"], // 默认全局居中
                      radius : "90%",
                      startAngle: 200,
                      endAngle: -20,
                      axisLine : {
                          show : true,
                          lineStyle : { // 属性lineStyle控制线条样式
                              color : [ //表盘颜色
                                  [ 0.5, "#DA462C" ],//0-50%处的颜色
                                  [ 0.7, "#FF9618" ],//51%-70%处的颜色
                                  [ 0.9, "#FFED44" ],//70%-90%处的颜色
                                  [ 1,"#20AE51" ]//90%-100%处的颜色
                              ],
                              width : 20//表盘宽度
                          }
                      },
                      splitLine : { //分割线样式（及10、20等长线样式）
                          length : 10,
                          lineStyle : { // 属性lineStyle控制线条样式
                              width : 2
                          }
                      },
                      axisTick : { //刻度线样式（及短线样式）
                          length : 20
                      },
                      axisLabel : { //文字样式（及“10”、“20”等文字样式）
                          color : "black",
                          distance : 10//文字离表盘的距离
                      },
                      detail: {
                          formatter : "{score|{value}%}",
                          offsetCenter: [0, "40%"],
                          // backgroundColor: '#FFEC45',
                          height:20,
                          rich : {
                              score : {
                                  // color : "#333",
                                  fontFamily : "微软雅黑",
                                  fontSize :14
                              }
                          }
                      },
                      data: [{
                          value: 56,
                          label: {
                              textStyle: {
                                  fontSize: 12
                              }
                          }
                      }]
                  }
              ]
          }

          setInterval(function () {
              option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
              myChart.setOption(option, true);
          },2000);
      }

调用初始化化echats函数

initChart('chart1')
      initChart('chart2')
      initChart('chart3')
      initChart('chart4')
      initChart('chart5')
      initChart('chart6')
      initChart('chart7')
      initChart('chart8')
      initChart('chart9')

插播一个echarts仪表盘的配置函数

 

function initChart(obj){
        var myChart = echarts.init(document.getElementById(obj));

        var option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            // toolbox: {
            //     feature: {
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    center: ["50%", "45%"], // 仪表位置
                    radius: "80%", //仪表大小
                    detail: {formatter:'{value}%'},
                    startAngle: 200, //开始角度
                    endAngle: -20, //结束角度
                    data: [{value: 30, name: '完成率'}],
                    axisLine: {
                        show: false,
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [ 0.5,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 1,
                                    color: "#E75F25" // 50% 处的颜色
                                }, {
                                    offset: 0.8,
                                    color: "#D9452C" // 40% 处的颜色
                                }], false) ], // 100% 处的颜色
                                [ 0.7,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 1,
                                    color: "#FFC539" // 70% 处的颜色
                                }, {
                                    offset: 0.8,
                                    color: "#FE951E" // 66% 处的颜色
                                }, {
                                    offset: 0,
                                    color: "#E75F25" // 50% 处的颜色
                                }], false) ],
                                [ 0.9,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 1,
                                    color: "#C7DD6B" // 90% 处的颜色
                                }, {
                                    offset: 0.8,
                                    color: "#FEEC49" // 86% 处的颜色
                                }, {
                                    offset: 0,
                                    color: "#FFC539" // 70% 处的颜色
                                }], false) ],
                                [1,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
                                    offset: 0.2,
                                    color: "#1CAD52" // 92% 处的颜色
                                }, {
                                    offset: 0,
                                    color: "#C7DD6B" // 90% 处的颜色
                                }], false) ]
                            ],
                            width: 10
                        }
                    },
                    splitLine: {
                                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                                            show: false
                      },
                        pointer : { //指针样式
                               length: '45%'
                           },
                        detail: {
                                show: false
                           }
                }
            ]
        }

        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option, true);
        },2000);
    }

睡觉去啦~~~

（完）

caimaomaocai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts案例：整一个炫酷一点的仪表盘
03-21
使用Echarts仪表盘加极坐标实现一个炫酷的仪表盘，表盘渐变，边缘圆角，（备份的案例） 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PolarGauge
微信小程序利用swiper+css实现购物车商品删除功能
12-29
要实现的购物车效果如下： 小程序通过bind与catch绑定事件，没有event....而小程序提供的swiper通过css就可以实现删除滑块效果，同时不影响页面的正常滚动。具体如下 <!--html--> <view class=goodsList>
vue中，swiper（vue-awesome-swiper）与echarts结合使用，echarts有些图不显示问题
m0_37653407的博客
01-22 2279
vue中，swiper（vue-awesome-swiper）与echarts结合使用，echarts有些图不显示问题 echarts绘制的图不显示是因为，swiper的loop设置为true了。因为swiper的loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。所以复制出来的slide导致原本设置的echarts的id不在是唯一的，echarts绘制的图也就显示不出来了。 解决方案： let myEchart = document.get
swiper插件实现echarts 轮播
cwtnice的博客
11-25 1025
背景：我想在大屏上使用轮播的echarts图。原本打算使用bootstrap的causal来实现，但实际运用发现了一下问题： 加载第二页的时候，echarts会变得很小 每次轮播都需要重新调用接口，增加了开销 最后采用swiper插件来实现需求。 swiper官网 ...
1016 Swiper ECharts(数据可视化)
CF1402345274的博客
10-17 365
Vue 安装使用 Swiper 之前使用的是 获取Swiper 点击下载 在依赖>运行依赖中安装 swiper 是 6 版本的。 import swiper from 'swiper' --> console.log(swiper) //swiper 函数 引 css import "swiper/swiper-bundle.min.css"; 粘结构 创建实例的要放到 mounted 里面。 遇到问题整个下载下来测试：新建index.html 引入 package 包下的 swiper.
Echarts和Swiper使用方法
qq_43358160的博客
12-22 1147
ECharts 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。 在 ECharts 的 GitHub 获取。 通过 npm 获取 echarts，npm install echarts --save 通过 jsDelivr 等 CDN 引入 详情代码 <!DOCTYPE html> <html> <head&gt...
华山旅游网 HTML+CSS+JavaScript+Swiper框架+ECharts库+jQuery 网页设计大作业
06-24
作品主要使用了HTML（放在页面上想要用户浏览的信息，可以包含文字、图片、视频等）、CSS（可以用来改变内容外观的东西）和JavaScript（实现有动画的、有交互性的）语言，Swiper框架（实现页面的轮播效果）ECharts库...
vue+swiper实现侧滑菜单效果
08-28
主要为大家详细介绍了vue+swiper实现侧滑菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Echarts使用小技巧
weixin_43157372的博客
06-24 7132
1、使用echarts柱状图时添加左右滚动功能 dataZoom:[ { type:"slider",//slider表示有滑动块的， show:true, xAxisIndex:[0],//表示x轴折叠 start:1,//数据窗口范围的起始百分比,表示1% end:35,//数据窗口范围的结束百分比,表示35%坐标 bottom:"20", }, ],
swiper中使用echarts
Chou_Junn的博客
08-03 3090
                                                                                                                                                                           @跃焱邵隼 解决swiper复制容器的问题 &lt;...
用swiper组件，轮播Echarts图表
luohang_1的博客
11-16 861
使用swiper组件，自动轮播多个Echarts图表
swiper插件实现echarts轮播的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-14 1306
引入外部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="swip.
插件 (echarts、swiper)
weixin_34218579的博客
02-14 255
一、echarts（4） title　　　 标题(大小标题) legend　　图例组件(series有多个对象时有用) grid　　 图的位置，大小等 xAxis　　 x坐标轴 （axisTick: x轴刻度线、splitLine: x间隙、axisLine: x轴线、axisLabel: x坐标轴刻度标签） yAxis　　 y坐标轴 （axisTick...
echarts实现左右滑动
huhuhuja
12-22 6875
1.内置滑动 dataZoom: [ { type: "inside", //slider表示有滑动块的，inside表示内置的 show: false, xAxisIndex: 0, start: 50, end: 100, }, ] 2.底部有滑动块 dataZoom: [ { ...
vue项目中swiper组件中嵌套使用echarts
weixin_46389242的博客
05-11 863
在swiper轮播中嵌套使用echarts，echarts中的点击事件失效（我项目中的失效体现在legend图例上的点击事件失效），开始的时候以为是echarts的使用上可能有什么问题，导致失效，后面做了很多处理，查阅官方文档及很多博客之后还是没有效果，后面就发现是因为嵌套在swiper中才会失效，如果出现这种情况，在swiper设置的时候添加如下代码就可以解决该问题 。 touchStartPreventDefault:false, ...
Echarts 图表左右滑动功能
weixin_43468000的博客
11-24 7062
var mychart = echarts.init(document.getElementById('echarts1')); option = { color: ['#FED14A'], title:{ show:true, text: 'xxxx食堂', x:'center', padding: 10, textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bol
bootstrap+echarts实现轮播效果 第二屏显示有错
啊桂的博客
12-27 3228
阿桂我在写一个看板时，遇到这样的一个需求，使用echart和bootstrap的轮播效果展现多个图表，一屏放两个，第二屏放两个；........................... 但问题来了，轮播到第二屏显示就不全了，我试着把第一屏的active去掉，并改到第二屏中，而第二屏的2个此时是正常的，第一屏的2个出现了显示不全 并且报出     Can't get dom width o
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
热门推荐
tangdou369098655的博客
06-22 1万+
本文已参与「新人创作礼」活动，一起开启掘金创作之路。 1.饼图怎么调整左右位置 只需要调整option.series里的center: [‘30%’, ‘50%’] 2.更改x轴样式,控制样式里的X轴字在中间, 距离Y轴还有点距离 3.echarts将网格线设置成虚线 4.x轴刻度居中 5.echarts X轴区间柱形图，X轴 刻度数组长度 比 数据数组长度 多一个 6.设置y轴区间，最大值最小值,显得数据波动很好~~~ 7.dataZoom控制Y轴滚动 看图 鼠标滚动
uniapp中swiper+view，实现左右tab切换，高度自适应
最新发布
06-03
在这个示例中，我们使用swiper和swiper-item组件来实现左右tab切换，使用view组件来展示每个tab对应的内容。我们监听swiper的change事件，根据current属性来更新当前选中的tab，同时也更新currentTab属性。在每个tab...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值