Swiper+echartsは複数のダッシュボードの左右スクロール効果を実現します

この記事では、ダッシュボードの左右スクロール効果を実現するためのスワイパー+echartsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. スワイパーの使用

a. まずプラグインをロードする

<!DOCTYPE html>
<html>
<ヘッド>
    ...
    <link rel="スタイルシート" href="dist/css/swiper.min.css" >
</head>
<本文>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</本文>
</html>

b.HTMLコンテンツ

<div class="スワイパーコンテナ">
    <div class="スワイパーラッパー">
        <div class="swiper-slide">スライド 1</div>
        <div class="swiper-slide">スライド 2</div>
        <div class="swiper-slide">スライド 3</div>
    </div>
    <!-- ページャーが必要な場合 <div class="swiper-pagination"></div>-->
    
    <!-- ナビゲーション ボタンが必要な場合 -->
    <div class="スワイパーボタン前"></div>
    <div class="スワイパーボタン-次へ"></div>
    
    <!-- スクロールバーが必要な場合 <div class="swiper-scrollbar"></div>-->
</div>

c. Swiper のサイズを定義することもできますが、必ずしも定義する必要はありません。

.スワイパーコンテナ{
    幅: 600ピクセル;
    高さ: 300px;
}

d. Swiper を初期化します。</body> タグの横が望ましいです。

<スクリプト>        
  var mySwiper = 新しいSwiper ('.swiper-container', {
    direction: 'vertical', // 垂直切り替えオプション loop: true, // ループモードオプション // ページネーターが必要な場合 pagination: {
      el: '.swiper-pagination',
    },
    
    // 進むボタンと戻るボタンのナビゲーションが必要な場合: {
      nextEl: '.swiper-button-next',
      前へ: '.swiper-button-prev',
    },
    
    // スクロールバーが必要な場合 scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</スクリプト>

私が達成したい効果は次のとおりです

コードは次のとおりです

プラグインとスタイルの読み込み

<!DOCTYPE html>
<html>
<ヘッド>
    ...
    <link rel="スタイルシート" href="dist/css/swiper.min.css" >
<スタイル>
        *{
            マージン:0;
            パディング:0;
        }
        .スワイパーコンテナ{
            高さ:200px;
            幅:800ピクセル;
            マージン:0 自動;
            境界線:1px実線 #ccc;
        }
        .スワイパースライド{
            ディスプレイ:フレックス;
        }
        .スワイパースライド.チャート{
            フレックス：1;
        }
 
    </スタイル>
</head>
<本文>
    ...
<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>
    ...
</本文>
</html>

HTML構造

<div class="スワイパーコンテナ">
    <div class="スワイパーラッパー">
        <div class="スワイパースライド">
            <div class="chart" id="chart1">1</div>
            <div class="chart" id="chart2">2</div>
            <div class="chart" id="chart3">3</div>
        </div>
        <div class="スワイパースライド">
            <div class="chart" id="chart4">4</div>
            <div class="chart" id="chart5">5</div>
            <div class="chart" id="chart6">6</div>
        </div>
        <div class="スワイパースライド">
            <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="スワイパーボタン前"></div>
    <div class="スワイパーボタン-次へ"></div>
</div>

スワイパーを初期化する

var mySwiper = 新しいSwiper('.swiper-container', {
        自動再生:
            遅延:5000
        }, //オプション、自動スライド\
        ナビゲーション:
            nextEl: '.swiper-button-next',
            前へ: '.swiper-button-prev',
        }
    })

echartsを初期化する

関数 initChart(obj){
          var myChart = echarts.init(document.getElementById(obj));
 
          var オプション = {
              ツールチップ: {
                  フォーマッタ: "{a} <br/>{b} : {c}%"
              },
              シリーズ： [
                  {
                      タイプ:「ゲージ」、
                      center: ["50%", "50%"], // デフォルトのグローバル中心半径: "90%",
                      開始角度: 200,
                      終了角度: -20,
                      軸線: {
                          表示: 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 などの長い線スタイル）
                          長さ: 10,
                          lineStyle : { // lineStyleプロパティは線のスタイルを制御します width : 2
                          }
                      },
                      axisTick : { // スケール線のスタイル（および短い線のスタイル）
                          長さ: 20
                      },
                      axisLabel : { //テキストスタイル（および「10」、「20」などのテキストスタイル）
                          色:「黒」、
                          distance: 10//テキストとダイヤルの間の距離},
                      詳細： {
                          フォーマッタ: "{スコア|{値}%}",
                          オフセットセンター: [0, "40%"],
                          // 背景色: '#FFEC45',
                          高さ:20,
                          リッチ ： {
                              スコア ： {
                                  // 色: "#333",
                                  フォントファミリー: "Microsoft YaHei",
                                  フォントサイズ:14
                              }
                          }
                      },
                      データ： [{
                          値: 56,
                          ラベル: {
                              テキストスタイル: {
                                  フォントサイズ: 12
                              }
                          }
                      }]
                  }
              ]
          }
 
          setInterval(関数() {
              option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
              myChart.setOption(オプション、true);
          },2000);
      }

初期化されたechats関数を呼び出す

チャートを初期化します('chart1')
チャートを初期化します('chart2')
'chart3' を初期化します。
チャートを初期化します('chart4')
'chart5' を初期化します。
チャートを初期化します('chart6')
チャートを初期化します('chart7')
チャートを初期化します('chart8')
チャートを初期化します('chart9')

echartsダッシュボードの設定機能を挿入する

関数 initChart(obj){
        var myChart = echarts.init(document.getElementById(obj));
 
        var オプション = {
            ツールチップ: {
                フォーマッタ: "{a} <br/>{b} : {c}%"
            },
            // ツールボックス: {
            // 特徴： {
            // 復元する： {}、
            // 画像として保存: {}
            // }
            // },
            シリーズ： [
                {
                    名前:「ビジネス指標」
                    タイプ: 'ゲージ'、
                    center: ["50%", "45%"], // 機器の位置 radius: "80%", // 機器のサイズの詳細: {formatter:'{value}%'},
                    startAngle: 200, //開始角度 endAngle: -20, //終了角度 data: [{value: 30, name: '完了率'}],
                    軸線: {
                        表示: 偽、
                        lineStyle: { // lineStyleプロパティは線のスタイルの色を制御します: [
                                [ 0.5, 新しいecharts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    オフセット: 1,
                                    color: "#E75F25" // 50% 色}, {
                                    オフセット: 0.8、
                                    color: "#D9452C" // 40% 色}], false) ], // 100% 色[ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    オフセット: 1,
                                    色: "#FFC539" // 70% 色}, {
                                    オフセット: 0.8、
                                    色: "#FE951E" // 66% 色}, {
                                    オフセット: 0,
                                    color: "#E75F25" // 50% 色}], false) ],
                                [ 0.9、新しいecharts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    オフセット: 1,
                                    色: "#C7DD6B" // 90% 色}, {
                                    オフセット: 0.8、
                                    色: "#FEEC49" // 86% 色}, {
                                    オフセット: 0,
                                    color: "#FFC539" // 70% 色}], false) ],
                                [1, 新しい echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
                                    オフセット: 0.2、
                                    色: "#1CAD52" // 92% 色}, {
                                    オフセット: 0,
                                    color: "#C7DD6B" // 90% 色}], false) ]
                            ]、
                            幅: 10
                        }
                    },
                    分割行: {
                                        表示:偽
                    },
                    軸目盛り: {
                        表示:偽
                    },
                    軸ラベル: {
                                            表示:偽
                      },
                        ポインター: { // ポインタースタイルの長さ: '45%'
                           },
                        詳細： {
                                表示:偽
                           }
                }
            ]
        }
 
        setInterval(関数() {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(オプション、true);
        },2000);
    }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: