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>
<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>
.swiper-container {
width: 600px;
height: 300px;
}
<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>
<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>
var mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay:5000
},// ， \
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
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);
}
initChart('chart1')
initChart('chart2')
initChart('chart3')
initChart('chart4')
initChart('chart5')
initChart('chart6')
initChart('chart7')
initChart('chart8')
initChart('chart9')
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);
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Nuxt.js】vue-awesome-swiper를 도입Nuxt.js에서 만들고있는 사이트에서 슬라이드 쇼를 도입하고 싶었기 때문에 vue-awesome-swiper를 도입 해 보았습니다. 1. 라이브러리 설치 문서 루트 (추기) Swiper의 버전을 6계라면 페지네이션...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
