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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Swiperはナビゲーションスクロール効果を実現します
  • Swiperはナビゲーションバーのスクロール効果を実現します
  • スワイパースクロールバーのスクロールバーコンポーネントの詳細な説明
  • WeChatアプレットは、スワイパースイッチカードの埋め込みスクロールバーを表示しない方法を実装しています
  • AngularJS で Swiper を使用するときにスクロール チャートがスライドしない問題を解決する方法

<<:  MySQL DML ステートメントの概要

>>:  Linuxオペレーティングシステムは、タスクマネージャーの視覚化機能を実装するためにPythonを使用しています。

推薦する

TomcatをダウンロードしてLinuxにインストールする詳細な手順

Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...

vue+element を使用した Google プラグインの開発プロセス全体

シンプルな機能: ブラウザの右上隅にあるプラグイン アイコンをクリックすると小さなポップアップ ウィ...

HTML iframe で親ページと子ページ間の双方向メッセージングを実装する例

ある日、リーダーはメイン ページに iframe を埋め込み、親ページと子ページ間で双方向にメッセー...

AngularでTweenMaxアニメーションライブラリを使用する際の問題と解決策

最近何もすることがないのでCSSをいじっていますより良いアニメーションライブラリTweenMaxを見...

Dockerを使用してNextCloudネットワークディスクを展開する方法

NextCloud コンピュータ上の任意のファイルやフォルダを共有し、NextCloud サーバーと...

CSS スタイルの優先順位はどれくらい複雑ですか?

昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...

JS は Web ページナビゲーションバーの特殊効果を実現します

この記事では、ネイティブ JS を使用して実装された実用的な Web ナビゲーション バー効果を紹介...

JavaScript タイマーの種類の概要

目次1.setInterval() 2.タイムアウトを設定する() 1.setInterval()指...

CentOS はローカル yum ソースを使用して LAMP 環境を構築するグラフィック チュートリアル

この記事では、ローカル yum ソースを使用して CentOS 上に LAMP 環境を構築する方法に...

HTMLエンコードによる文字化け問題について

今日、3年生から質問がありました。彼が書いた HTML コードを開くと、文字化けした文字が表示されま...

Dockerは同じIPネットワークセグメントとの接続を実現する

最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...

要素内の TimePicker は時間の一部を無効にします (分単位で無効)

プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効...

mysql5.7.17.msi インストール グラフィック チュートリアル

mysql-5.7.17.msiのインストール、スクリーンショットに従ってください、ステップバイステ...

Nginx ソースコード調査における nginx 電流制限モジュールの詳細な説明

目次1. 電流制限アルゴリズム2. nginxの基礎知識4. 実戦要約する高並行性システムには、キャ...

mysql データベースの作成、ユーザーの追加、ユーザー認証の実用的な方法

1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...