Vue imports Echarts to realize line scatter chart

import Vue from 'vue'
import App from './App.vue'
const echarts = require("echarts")
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
  </div>
</template>

<script>

export default {
  name: 'App',
  mounted() {
    this.eachartsInit()
  },
  methods: {
    eachartsInit() {
      let myEcharts = this.$echarts.init(document.getElementById("app"))
      let option = {
        legend: {
          data: ["Target 1", "Fixed Type", "Target 2", "Target 3"] //Show how many lines there are, corresponding one to one with the elements of the series array},
        grid: {
          bottom: "20%", //Control the distance between the bottom of the entire chart and the external container width: 800, //
          height:500
        },
        tooltip: {
          trigger: "axis", //Set the mouse to hover over the line to display the X-axis data axisPointer: {
            type: "cross", //Control the display of Y-axis data label: {
              backgroundColor: "#6a7985" //When the mouse moves to this point, add a background color to the coordinates of the coordinate axis}
          }
        },
        xAxis:
          type: "category", //The possible values ​​are time, value, log, category. Category is used for this kind of scatter line chart //The coordinate value of the X-axis data: ["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"],

          //Here controls the font rotation of the X-axis coordinate (counterclockwise)
          axisLabel: {
            rotate: 45, //Degree of rotation color: "red", //Control the font color of the X-axis coordinate fontWeight: 600 //Control the boldness of the font}
          
        },
        //Configuration of the y-axis. Here, y only needs to display the value, and type uses value.
        yAxis: {
          type: "value"
        },
        //
        series: [
          //4 array elements are equivalent to 4 lines {
            data: [820, 750, 450, 560, 650, 660], //The value corresponding to each X coordinate type: "line", //Display type name: "Target 1", //The value of the name attribute is taken from the data array element in legend smooth: true //Whether to perform smoothing },
          {
            data: [220, 450, 350, 760, 680, 560],
            type: "line",
            name: "Target 2",
            smooth: true
          },
          {
            data: [352, 550, 370, 560, 420, 590],
            type: "line",
            name: "Fixed Type",
            smooth: true
          },
          {
            data: [522, 345, 450, 458, 592, 485],
            type: "line",
            name: "Target 3",
            smooth: true
          }
        ]
      }

      myEcharts.setOption(option) // Pass the configuration option to the generated echarts instance
    }
  }
}
</script>

<style>
#app{
  width: 850px;
  height: 600px;
}
</style>