この記事では、VueでEchartsをインポートして線散布図を実現する具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 効果画像: 1. vue-cliでechartsをインポートするコマンド npm install echarts --save を使用してプロジェクトにダウンロードし、プロジェクトの main.js にインポートして、vue のプロトタイプに保存します。 'vue' から Vue をインポートします './App.vue' からアプリをインポートします。 const echarts = require("echarts") Vue.prototype.$echarts = echarts Vue.config.productionTip = false 新しいVue({ レンダリング: h => h(App), }).$mount('#app') ここで echarts をインポートするために使用される require は、import echarts from 'echarts' を使用すると失敗します。具体的な理由はまだ不明です。 次に、app.vue に次のコードを記述します。 <テンプレート> <div id="アプリ"> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'アプリ'、 マウント() { this.eachartsInit() }, メソッド: { 各artsInit() { myEcharts = this.$echarts.init(document.getElementById("app")) とします。 オプション = { 伝説: { data: ["ターゲット 1", "固定タイプ", "ターゲット 2", "ターゲット 3"] //シリーズ配列の要素と 1 対 1 で対応する行の数を表示します}, グリッド: { bottom: "20%", // チャート全体の下部と外部コンテナの間の距離を制御します width: 800, // 高さ:500 }, ツールチップ: { trigger: "axis", // マウスを線の上に置くとX軸データが表示されるように設定します axisPointer: { type: "cross", //Y軸データラベルの表示を制御します: { backgroundColor: "#6a7985" //マウスがこの点に移動すると、座標軸の座標に背景色を追加します} } }, x軸: type: "category", // 可能な値は、時間、値、ログ、カテゴリです。カテゴリは、この種の散布線グラフに使用されます // X軸データの座標値: ["2021.10.28 09:17:34", "2021.10.28 09:20:35", "2021.10.28 09:20:50", "2021.10.28 09:21:05", "2021.10.28 09:22:34", "2021.10.28 09:25:34"], //ここではX軸座標のフォント回転を制御します(反時計回り) 軸ラベル: { rotate: 45, //回転度 color: "red", //X軸座標のフォント色を制御 fontWeight: 600 //フォントの太さを制御} }, //y 軸の構成。ここでは、y は値のみを表示する必要があり、type は値を使用します。 y軸: { タイプ: "値" }, // シリーズ: [ //4つの配列要素は4行に相当します{ data: [820, 750, 450, 560, 650, 660], //各X座標に対応する値 type: "line", //表示タイプ name: "Target 1", //name属性の値は凡例のデータ配列要素から取得されます Smooth: true //スムージングを実行するかどうか }, { データ: [220, 450, 350, 760, 680, 560], タイプ: "line", 名前: "ターゲット2", スムーズ: 真 }, { データ: [352, 550, 370, 560, 420, 590], タイプ: "line", 名前:「固定型」、 スムーズ: 真 }, { データ: [522, 345, 450, 458, 592, 485], タイプ: "line", 名前: "ターゲット3", スムーズ: 真 } ] } myEcharts.setOption(option) // 生成されたechartsインスタンスに設定オプションを渡す } } } </スクリプト> <スタイル> #アプリ{ 幅: 850ピクセル; 高さ: 600px; } </スタイル> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSS3はブラウザのスクロールバーのスタイルを変更します
>>: docker を使用して Linux 環境に Springboot パッケージをデプロイするチュートリアル
コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...
私は最近、多くの音楽に特化した Linux ディストリビューションの 1 つである Audiovis...
CentOS6.9はMysql5.7をインストールします。参考までに、詳細は次のとおりです。 1. ...
この記事では、参考までにMySQL 5.7.24圧縮パッケージのインストールチュートリアルを紹介しま...
1. PVとIPの統計一日のPV(ページビュー)をカウントする cat access.log | ...
####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...
個人のウェブサイトがどんなに素晴らしいものであっても、サイバースペースの広大な海に浮かぶ小さなボート...
目次運河マクスウェルデータバスAlibaba Cloud のデータ転送サービス (DTS)運河ポジシ...
1. fastdfs の紹介1. fastdfsとは何かFastdfs は軽量のオープンソース分散フ...
前回の CSS 回転灯と同じ内容の CSS アニメーションの応用です。これは単なる別のアプリケーショ...
WebRTC は、Web Real-Time Communication の略で、Web リアルタイ...
この記事では、主にReact + three.jsテクノロジースタックを使用して3Dモデルの読み込み...
この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...
MySQL 8.0.12のインストールと設定方法を記録してみんなで共有します。 1. インストール1...
Bツリーインデックス異なるストレージ エンジンでは、異なるストレージ構造を使用する場合もあります。た...