Vue導(dǎo)入Echarts實(shí)現(xiàn)折線散點(diǎn)圖

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

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

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

效果圖：

一、vue-cli中導(dǎo)入echarts

通過命令：npm install echarts --save進(jìn)行下載到項(xiàng)目中，然后在項(xiàng)目中的main.js中進(jìn)行導(dǎo)入且保存在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')

這里的導(dǎo)入echarts用的require，用import echarts from 'echarts'會(huì)導(dǎo)入失敗，具體原因還不知道。

然后再到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: ["目標(biāo)1", "固定類型", "目標(biāo)2", "目標(biāo)3"] //顯示有幾條線，和series數(shù)組的元素一一對(duì)應(yīng)
        },
        grid: {
          bottom: "20%", //控制整個(gè)圖表的下邊距離外界容器的距離
          width: 800, //
          height:500
        },
        tooltip: {
          trigger: "axis", //設(shè)置鼠標(biāo)hover到折線上去就進(jìn)行展示X軸數(shù)據(jù)
          axisPointer: {
            type: "cross", //控制同時(shí)顯示Y軸數(shù)據(jù)
            label: {
              backgroundColor: "#6a7985" //鼠標(biāo)移到該點(diǎn)時(shí)候，對(duì)給坐標(biāo)軸的坐標(biāo)添加底色
            }
          }
        },
        xAxis: {
          type: "category", //可取值time、value、log、category，category使用于這種散點(diǎn)折線圖

          //X軸的坐標(biāo)值
          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軸坐標(biāo)的字體進(jìn)行旋轉(zhuǎn)（逆時(shí)針旋轉(zhuǎn)）
          axisLabel: {
            rotate: 45, //旋轉(zhuǎn)的度數(shù)
            color: "red", //控制X軸坐標(biāo)的字體顏色
            fontWeight: 600 //控制字體的加粗
          }
          
        },
        //y軸的配置，這里y就只需要進(jìn)行顯示數(shù)值，type則用value.
        yAxis: {
          type: "value"
        },
        //
        series: [
          //4個(gè)數(shù)組元素相當(dāng)于4條線條
          {
            data: [820, 750, 450, 560, 650, 660], //對(duì)應(yīng)每一個(gè)X坐標(biāo)的值
            type: "line", //顯示的類型
            name: "目標(biāo)1", //name屬性的值是取自legend中的data數(shù)組元素
            smooth: true //是否進(jìn)行平滑處理
          },
          {
            data: [220, 450, 350, 760, 680, 560],
            type: "line",
            name: "目標(biāo)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: "目標(biāo)3",
            smooth: true
          }
        ]
      }

      myEcharts.setOption(option)// 給生成的echarts實(shí)例進(jìn)行傳遞配置項(xiàng)option
    }
  }
}
</script>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: