欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

swiper+echarts實現(xiàn)多個儀表盤左右滾動效果

 更新時間：2021年06月30日 10:05:34   作者：caimaomaocai  
這篇文章主要為大家詳細介紹了swiper+echarts實現(xiàn)多個儀表盤左右滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了swiper+echarts實現(xiàn)儀表盤左右滾動效果的具體代碼，供大家參考，具體內(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>
    <!-- 如果需要分頁器 
    <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, // 循環(huán)模式選項
    
    // 如果需要分頁器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前進后退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滾動條
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>

下面是我要實現(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
        },//可選選項，自動滑動\
        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%"], // 默認全局居中
                      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);
      }

調(diào)用初始化化echats函數(shù)

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

插播一個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è)務指標',
                    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);
    }

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS實現(xiàn)的簡單tab切換功能完整示例

    JS實現(xiàn)的簡單tab切換功能完整示例

    這篇文章主要介紹了JS實現(xiàn)的簡單tab切換功能,結(jié)合完整實例形式分析了javascript基于事件響應實現(xiàn)頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
    2019-06-06
  • 兼容IE,firefox的獲取節(jié)點的文本值的javascript代碼

    兼容IE,firefox的獲取節(jié)點的文本值的javascript代碼

    javascript獲取節(jié)點的文本值，已經(jīng)考慮了兼容性。大家可以放心使用。注意了這里的兼容沒有使用innerText,如果要使用兼容innerText,請參考腳本之家以前發(fā)布的文章。
    2009-12-12
  • 用Golang運行JavaScript的實現(xiàn)示例

    用Golang運行JavaScript的實現(xiàn)示例

    這篇文章主要介紹了用Golang運行JavaScript的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • 前端深入理解Typescript泛型概念

    前端深入理解Typescript泛型概念

    這篇文章主要介紹了前端深入理解Typescript泛型概念，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • js實現(xiàn)九宮格抽獎

    js實現(xiàn)九宮格抽獎

    這篇文章主要為大家詳細介紹了js實現(xiàn)九宮格抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • 關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    下面小編就為大家?guī)硪黄P(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • Javascript運行機制之Event Loop

    Javascript運行機制之Event Loop

    這篇文章主要介紹了Javascript運行機制之Event Loop，在學習Event Loop前，首先需要了解的幾個概念Javascript是單線程、任務隊列、同步任務、異步任務、Javascript執(zhí)行棧，下面來看看文章的詳細介紹吧
    2021-12-12
  • 生成二維碼方法匯總

    生成二維碼方法匯總

    這篇文章主要匯總介紹了生成二維碼方法的相關(guān)資料,需要的朋友可以參考下
    2014-12-12
  • 在js文件中如何獲取basePath處理js路徑問題

    在js文件中如何獲取basePath處理js路徑問題

    在jsp中，我們可以用el表達式直接獲取basePath，但是在單獨js文件中不能用el表達式，下面與大家分享下js文件中如何獲取basePath，感興趣的朋友可以參考下
    2013-07-07
  • axios的簡單封裝以及使用實例代碼

    axios的簡單封裝以及使用實例代碼

    一般我們在做一個大型項目的時候,需要用到很多接口時,我們?yōu)榱朔奖闶褂?就把接口封裝起來,這篇文章主要給大家介紹了關(guān)于axios簡單封裝以及使用的相關(guān)資料,需要的朋友可以參考下
    2021-06-06

最新評論