- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 如何使用swiper实现仪表盘左右滚动，过程是什么
如何使用swiper实现仪表盘左右滚动，过程是什么
Admin 2022-07-18 群英技术资讯 878 次浏览
关于“如何使用swiper实现仪表盘左右滚动，过程是什么”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。本文实例为大家分享了swiper+echarts实现仪表盘左右滚动效果的具体代码，供大家参考，具体内容如下
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);
}“如何使用swiper实现仪表盘左右滚动，过程是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。
标签：
仪表盘左右滚动
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
JavaScript中修改图片链接的操作是什么
javascript改变图片链接地址的方法：【window.onload = function () {ImageSrc();} function ImageSrc() { var imgs = document.getEleme...】。
-
JS新增数据类型Record和Tuple怎么用
JavaScript即将推出两个新的数据类型：Record 和 Tuple ，这俩是啥呢？其实就是一个只读的 Object 和 Array，其实在其它语言中已经有类似的数据类型了，例如 Python 中也有 Tuple（元祖）这一类型，作用也是一个只读的数组（在Python里叫只读的列表），一起来了解一下，这个特性是一个第2阶段提案（即差不多稳了），想要提前体验的，文末也有 polyfill 的使用教程！
-
Node.js中util模块用来做什么，用法是怎样
本文实例讲述了Node.js API详解之 util模块用法。分享给大家供大家参考，具体如下
-
React服务端渲染原理怎样理解？一文带你搞懂React服务端渲染
React服务端渲染原理是什么？很多朋友可能听说过React服务端渲染，但是对其原理并不清楚，因此下面小编就给大家介绍一下React服务端渲染原理以及实例，感兴趣的朋友可以参考。
-
如何掌握JS面向对象的内容，要点有哪些
本篇文章给大家带来了关于JavaScript中面向对象的相关知识，其中包括面向对象、构造函数以及继承的相关问题，希望对大家有帮助。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
