この記事では、ダッシュボードの左右スクロール効果を実現するためのスワイパー+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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linuxオペレーティングシステムは、タスクマネージャーの視覚化機能を実装するためにPythonを使用しています。
Deepin 2014 のダウンロードとインストールDeepin 2014 のダウンロードとインスト...
Windows Server 2008R2を忘れた場合の対処方法サーバーの数が多すぎる、サーバーが多...
IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...
1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 (...
例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...
ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...
HTML は Hypertext Markup Language の略です。これは、実際のプレゼンテ...
目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...
目次概要1. 関数デバウンス2. 機能スロットリング(スロットル)概要関数アンチシェイクと関数スロッ...
まず、一連の概念を理解しましょう。nginx リバース プロキシとは何でしょうか?リバース プロキシ...
最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...
目次関数定義方法関数呼び出し(6種類)これは問題を指摘している厳密モード高階関数閉鎖再帰: 自分自身...
プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...
LinuxリモートMySQLデータベースの展開、参考までに、具体的な内容は次のとおりです。 1.0 ...
コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...