Vue導入Echarts實現(xiàn)折線散點圖

更新時間：2021年10月29日 11:49:09 作者：坦淡

這篇文章主要為大家詳細介紹了Vue導入Echarts實現(xiàn)折線散點圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue導入Echarts實現(xiàn)折線散點圖的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

一、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數(shù)組的元素一一對應
        },
        grid: {
          bottom: "20%", //控制整個圖表的下邊距離外界容器的距離
          width: 800, //
          height:500
        },
        tooltip: {
          trigger: "axis", //設置鼠標hover到折線上去就進行展示X軸數(shù)據(jù)
          axisPointer: {
            type: "cross", //控制同時顯示Y軸數(shù)據(jù)
            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軸坐標的字體進行旋轉(zhuǎn)（逆時針旋轉(zhuǎn)）
          axisLabel: {
            rotate: 45, //旋轉(zhuǎn)的度數(shù)
            color: "red", //控制X軸坐標的字體顏色
            fontWeight: 600 //控制字體的加粗
          }
          
        },
        //y軸的配置，這里y就只需要進行顯示數(shù)值，type則用value.
        yAxis: {
          type: "value"
        },
        //
        series: [
          //4個數(shù)組元素相當于4條線條
          {
            data: [820, 750, 450, 560, 650, 660], //對應每一個X坐標的值
            type: "line", //顯示的類型
            name: "目標1", //name屬性的值是取自legend中的data數(shù)組元素
            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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: