本文例項為大家分享了匯入Echarts實現折線散點圖的具體程式碼，供大家參考，具體內容如下

效果圖：

一、vue-cli中匯入echarts

通過命令：npm install echarts --save進行下載到專案中，然後在專案中的main.中進行匯入且儲存在vue的原型上。
main.js程式碼如下：

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')

這裡的匯入echarts用的require，用import echarts from 'echarts'會匯入失敗，具體原因還不知道。

然後再到app.vue中書寫程式碼如下：

<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: ["目標1","固定型別","目標2","目標3"] //顯示有幾條線，和series陣列的元素一一對應
        },grid: {
          bottom: "20%",//控制整個圖表的下邊距離外界容器的距離
          width: 800,//
          height:500
        },tooltip: {
          trigger: "axis",//設定滑鼠hover到折線上去就進行展示X軸資料
          axisPointer: {
            type: "cross",//控制同時顯示Y軸資料
            label: {
              backgroundColor: "#6a7985" //滑鼠移www.cppcns.com
 
到該點時候，對給座標軸的座標新增底色
            }
          }
        },xAxis: {
          type: "category",//可取值time、value、log、category，category使用於這種散點折線圖

          //X軸的座標值
          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"],hdvchj        //這裡控制X軸座標的字型進行旋轉（逆時針旋轉）
          axisLabel: {
      hdvchj
 
      rotate: 45,//旋轉的度數
            color: "red",//控制X軸座標的字型顏色
            fontWeight: 600 //控制字型的加粗
          }
          
        },//y軸的配置，這裡y就只需要進行顯示數值，type則用value.
        yAxis: {
          type: "value"
        },//
        series: [
          //4個數組元素相當於4條線條
          {
            data: [820,750,450,560,650,660],//對應每一個X座標的值
            type: "line",//顯示的型別
            name: "目標1",//name屬性的值是取自legend中的data陣列元素
            smooth: true //是否進行平滑處理
          },{
            data: [220,350,760,680,560],www.cppcns.com         type: "line",name: "目標2",smooth: true
          },{
            data: [352,550,370,420,590],type: "line",name: "固定型別",{
            data: [522,345,458,592,485],name: "目標3",smooth: true
          }
        ]
      }

      myEcharts.setOption(option)// 給生成的echarts例項進行傳遞配置項option
    }
  }
}
</script>

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。