swiper+echarts實(shí)現(xiàn)多個(gè)儀表盤左右滾動(dòng)效果
更新時(shí)間：2021年06月30日 10:05:34 作者：caimaomaocai
這篇文章主要為大家詳細(xì)介紹了swiper+echarts實(shí)現(xiàn)多個(gè)儀表盤左右滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了swiper+echarts實(shí)現(xiàn)儀表盤左右滾動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下
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內(nèi)容
<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>
<!-- 如果需要分頁(yè)器
<div class="swiper-pagination"></div>-->
<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動(dòng)條
<div class="swiper-scrollbar"></div>-->
</div>
c.你可能想要給Swiper定義一個(gè)大小，當(dāng)然不要也行。
.swiper-container {
width: 600px;
height: 300px;
}
d.初始化Swiper：最好是挨著</body>標(biāo)簽
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切換選項(xiàng)
loop: true, // 循環(huán)模式選項(xiàng)
// 如果需要分頁(yè)器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動(dòng)條
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
下面是我要實(shí)現(xiàn)的效果
代碼如下
加載插件和樣式
<!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結(jié)構(gòu)
<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
},//可選選項(xiàng)，自動(dòng)滑動(dòng)\
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/> : {c}%"
},
series: [
{
type : "gauge",
center: ["50%", "50%"], // 默認(rèn)全局居中
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等長(zhǎng)線樣式）
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);
}
調(diào)用初始化化echats函數(shù)
initChart('chart1')
initChart('chart2')
initChart('chart3')
initChart('chart4')
initChart('chart5')
initChart('chart6')
initChart('chart7')
initChart('chart8')
initChart('chart9')
插播一個(gè)echarts儀表盤的配置函數(shù)
function initChart(obj){
var myChart = echarts.init(document.getElementById(obj));
var option = {
tooltip : {
formatter: "{a} <br/> : {c}%"
},
// toolbox: {
// feature: {
// restore: {},
// saveAsImage: {}
// }
// },
series: [
{
name: '業(yè)務(wù)指標(biāo)',
type: 'gauge',
center: ["50%", "45%"], // 儀表位置
radius: "80%", //儀表大小
detail: {formatter:'{value}%'},
startAngle: 200, //開始角度
endAngle: -20, //結(jié)束角度
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);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)加載xml文件的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)加載xml文件的方法,涉及JavaScript針對(duì)xml文件對(duì)象的相關(guān)加載與獲取操作實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
JavaScript中如何跳出forEach循環(huán)代碼示例
循環(huán)遍歷一個(gè)元素是開發(fā)中最常見的需求之一,下面這篇文章主要給大家介紹了關(guān)于JavaScript中如何跳出forEach循環(huán)的相關(guān)資料,文章通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
js獲取對(duì)象,數(shù)組所有屬性鍵值(key)和對(duì)應(yīng)值(value)的方法示例
這篇文章主要介紹了js獲取對(duì)象,數(shù)組所有屬性鍵值(key)和對(duì)應(yīng)值(value)的方法,涉及javascript對(duì)于對(duì)象、數(shù)組鍵名與鍵值遍歷相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
在編寫處理字符串的程序或網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)有查找符合某些復(fù)雜規(guī)則的字符串的需要。正則表達(dá)式就是用于描述這些規(guī)則的工具。換句話說(shuō)，正則表達(dá)式就是記錄文本規(guī)則的代碼。2016-10-10
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript編寫一個(gè)格斗小游戲，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JavaScript中數(shù)組去重的辦法總結(jié)
你是否在面試的過(guò)程中被考到過(guò)給你一個(gè)數(shù)組讓你去掉重復(fù)項(xiàng)呢，下面小編就來(lái)總結(jié)一下對(duì)于數(shù)組去重這道簡(jiǎn)單的面試題時(shí)，我們可以回答的方法有什么吧2023-06-06
這篇文章主要介紹了webpack解決css兼容性問(wèn)題小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了js遮罩效果制作彈出注冊(cè)界面效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了如何在微信小程序中實(shí)現(xiàn)美食展示與收藏的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手嘗試一下2022-03-03