Vue は Echarts をインポートして折れ線グラフを実現します

Vue は Echarts をインポートして折れ線グラフを実現します

この記事では、VueでEchartsをインポートして線散布図を実現する具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果画像:

1. vue-cliでechartsをインポートする

コマンド npm install echarts --save を使用してプロジェクトにダウンロードし、プロジェクトの main.js にインポートして、vue のプロトタイプに保存します。
main.js コードは次のとおりです。

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

以下もご興味があるかもしれません:
  • Vueはecharts散布図を使用してエリア内のポイントをマークします

<<:  CSS3はブラウザのスクロールバーのスタイルを変更します

>>:  docker を使用して Linux 環境に Springboot パッケージをデプロイするチュートリアル

推薦する

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

オーディオマニアにアピールするオーディオビジュアルLinuxディストリビューション

私は最近、多くの音楽に特化した Linux ディストリビューションの 1 つである Audiovis...

CentOS6.9 での MySQL 5.7.17 のインストールと設定のチュートリアル

CentOS6.9はMysql5.7をインストールします。参考までに、詳細は次のとおりです。 1. ...

MySQL 5.7.24 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、参考までにMySQL 5.7.24圧縮パッケージのインストールチュートリアルを紹介しま...

シェルスクリプトはNginxのaccess.logのPVを定期的にカウントし、APIに送信してデータベースに保存します。

1. PVとIPの統計一日のPV(ページビュー)をカウントする cat access.log | ...

Linuxシステムの入出力管理とvimの共通機能の詳細な説明

####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...

メタタグの詳しい説明(メタタグの役割)

個人のウェブサイトがどんなに素晴らしいものであっても、サイバースペースの広大な海に浮かぶ小さなボート...

MySQL Binlog ログ処理ツールの比較分析

目次運河マクスウェルデータバスAlibaba Cloud のデータ転送サービス (DTS)運河ポジシ...

fastdfs+nginxクラスタ構築の実装

1. fastdfs の紹介1. fastdfsとは何かFastdfs は軽量のオープンソース分散フ...

CSSアニメーションによるテーブルスクロールカルーセル効果の実装

前回の CSS 回転灯と同じ内容の CSS アニメーションの応用です。これは単なる別のアプリケーショ...

three.js を使用してクールなアシッドスタイルの 3D ページ効果を実現します

この記事では、主にReact + three.jsテクノロジースタックを使用して3Dモデルの読み込み...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.12のインストールと設定方法を記録してみんなで共有します。 1. インストール1...

MySQL B-Tree インデックスの簡単な分析

Bツリーインデックス異なるストレージ エンジンでは、異なるストレージ構造を使用する場合もあります。た...