Swiper+echarts realizes the left and right scrolling effect of multiple dashboards

This article shares the specific code of swiper+echarts to achieve the left and right scrolling effect of the dashboard for your reference. The specific content is as follows

1. Use of swiper

a. Load the plugin first

<!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 content

<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>
    <!-- If you need a pager <div class="swiper-pagination"></div>-->
    
    <!-- If you need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- If you need a scroll bar <div class="swiper-scrollbar"></div>-->
</div>

c. You may want to define a size for Swiper, but you don’t have to.

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

d. Initialize Swiper: preferably next to the </body> tag

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // vertical switching option loop: true, // loop mode option // If you need a paginator pagination: {
      el: '.swiper-pagination',
    },
    
    // If you need forward and back buttons navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // If you need a scrollbar scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>

Here is the effect I want to achieve

The code is as follows

Loading plugins and styles

<!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 structure

<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>

Initialize swiper

var mySwiper = new Swiper('.swiper-container', {
        autoplay:
            delay:5000
        }, //Optional option, automatic sliding\
        navigation:
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })

Initialize 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%"], // default global center radius: "90%",
                      startAngle: 200,
                      endAngle: -20,
                      axisLine : {
                          show : true,
                          lineStyle : { // Attribute lineStyle controls line style color : [ // dial color [ 0.5, "#DA462C" ], // 0-50% color [ 0.7, "#FF9618" ], // 51%-70% color [ 0.9, "#FFED44" ], // 70%-90% color [ 1,"#20AE51" ] // 90%-100% color ],
                              width: 20 // dial width}
                      },
                      splitLine : { //Split line style (and 10, 20, etc. long line styles)
                          length : 10,
                          lineStyle : { // The lineStyle property controls the line style width : 2
                          }
                      },
                      axisTick : { // scale line style (and short line style)
                          length: 20
                      },
                      axisLabel : { //Text style (and "10", "20" and other text styles)
                          color : "black",
                          distance: 10//The distance between the text and the dial},
                      detail: {
                          formatter : "{score|{value}%}",
                          offsetCenter: [0, "40%"],
                          // backgroundColor: '#FFEC45',
                          height:20,
                          rich : {
                              score : {
                                  // color : "#333",
                                  fontFamily : "Microsoft YaHei",
                                  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);
      }

Call the initialized echats function

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

Insert a configuration function of echarts dashboard

function initChart(obj){
        var myChart = echarts.init(document.getElementById(obj));
 
        var option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            // toolbox: {
            // feature: {
            // restore: {},
            // saveAsImage: {}
            // }
            // },
            series: [
                {
                    name: 'Business Indicators',
                    type: 'gauge',
                    center: ["50%", "45%"], // Instrument position radius: "80%", // Instrument size detail: {formatter:'{value}%'},
                    startAngle: 200, //Start angle endAngle: -20, //End angle data: [{value: 30, name: 'Completion rate'}],
                    axisLine: {
                        show: false,
                        lineStyle: { // The lineStyle property controls the line style color: [
                                [ 0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 1,
                                    color: "#E75F25" // 50% color}, {
                                    offset: 0.8,
                                    color: "#D9452C" // 40% color}], false) ], // 100% color[ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 1,
                                    color: "#FFC539" // 70% color}, {
                                    offset: 0.8,
                                    color: "#FE951E" // 66% color}, {
                                    offset: 0,
                                    color: "#E75F25" // 50% color}], false) ],
                                [ 0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 1,
                                    color: "#C7DD6B" // 90% color}, {
                                    offset: 0.8,
                                    color: "#FEEC49" // 86% color}, {
                                    offset: 0,
                                    color: "#FFC539" // 70% color}], false) ],
                                [1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
                                    offset: 0.2,
                                    color: "#1CAD52" // 92% color}, {
                                    offset: 0,
                                    color: "#C7DD6B" // 90% color}], false) ]
                            ],
                            width: 10
                        }
                    },
                    splitLine: {
                                        show:false
                    },
                    axisTick: {
                        show:false
                    },
                    axisLabel: {
                                            show:false
                      },
                        pointer : { // pointer style length: '45%'
                           },
                        detail: {
                                show:false
                           }
                }
            ]
        }
 
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option, true);
        },2000);
    }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Swiper realizes navigation scrolling effect
Swiper realizes the scrolling effect of the navigation bar
Detailed explanation of swiper Scrollbar scroll bar component
WeChat applet implements the method of not displaying the embedded scroll bar of the swiper switch card
How to solve the problem of scrolling chart not sliding when using Swiper in AngularJS

<<: MySQL DML statement summary

>>: The Linux operating system uses Python to implement the visualization function of the task manager