この記事では、ダッシュボードの左右スクロール効果を実現するためのスワイパー+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を使用しています。
Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...
シンプルな機能: ブラウザの右上隅にあるプラグイン アイコンをクリックすると小さなポップアップ ウィ...
ある日、リーダーはメイン ページに iframe を埋め込み、親ページと子ページ間で双方向にメッセー...
最近何もすることがないのでCSSをいじっていますより良いアニメーションライブラリTweenMaxを見...
NextCloud コンピュータ上の任意のファイルやフォルダを共有し、NextCloud サーバーと...
昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...
この記事では、ネイティブ JS を使用して実装された実用的な Web ナビゲーション バー効果を紹介...
目次1.setInterval() 2.タイムアウトを設定する() 1.setInterval()指...
この記事では、ローカル yum ソースを使用して CentOS 上に LAMP 環境を構築する方法に...
今日、3年生から質問がありました。彼が書いた HTML コードを開くと、文字化けした文字が表示されま...
最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...
プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効...
mysql-5.7.17.msiのインストール、スクリーンショットに従ってください、ステップバイステ...
目次1. 電流制限アルゴリズム2. nginxの基礎知識4. 実戦要約する高並行性システムには、キャ...
1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...