Vue導入Echarts如何實現折線散點圖

這篇文章主要介紹了Vue導入Echarts如何實現折線散點圖，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

效果圖：

一、vue-cli中導入echarts

通過命令：npm install echarts --save進行下載到項目中，然后在項目中的main.js中進行導入且保存在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" //鼠標移到該點時候，對給坐標軸的坐標添加底色
            }
          }
        },
        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"],

          //這里控制X軸坐標的字體進行旋轉（逆時針旋轉）
          axisLabel: {
            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, 450, 350, 760, 680, 560],
            type: "line",
            name: "目標2",
            smooth: true
          },
          {
            data: [352, 550, 370, 560, 420, 590],
            type: "line",
            name: "固定類型",
            smooth: true
          },
          {
            data: [522, 345, 450, 458, 592, 485],
            type: "line",
            name: "目標3",
            smooth: true
          }
        ]
      }

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue導入Echarts如何實現折線散點圖”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!