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

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
const echarts = require("echarts")
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')

<テンプレート>
  <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;
}
</スタイル>