腳本之家服務器常用軟件

快捷導航

Vue3中使用echarts的簡單七個步驟(易懂,附緊急避坑)

更新時間：2023年01月05日 10:47:53 作者：滿腦子技術的前端工程師

近期在做一個vue3的項目,里面有個圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網文檔,引入原生echars來實現,下面這篇文章主要給大家介紹了關于Vue3中使用echarts的簡單七個步驟,需要的朋友可以參考下

前言

提示：vue3中使用echars的七步驟如下：其中第5-7的步驟都寫在Dom渲染完成的生命周期中：可以是 onMounted() 也可以是 Mounted()

最終效果展示：

一、Echars官網地址

下面的三個地址可以方便我們進行官網的直接跳轉（省時省力）主要是為了方便xdm

echars官網地址
echars配置手冊
echars各種圖地址

二、Echars的創(chuàng)建步驟(Vue3中使用Vue2的寫法)

這里是直接封裝的組件進行使用的

只需傳入數據就可以一勞永逸大大滴方便

第一步：安裝echars

在終端中執(zhí)行：npm install echarts --save

 npm install echarts --save

如下圖所示：

在終端中執(zhí)行：npm install echarts --save

第二步：導入echarts

在文件中導入echarts
import * as echarts from “echarts”;

import * as echarts from "echarts";

第三步：創(chuàng)建Dom結構

創(chuàng)建Dom結構（并且設定div的大?。┯脕碚故緀chars圖表

<template>
  <div ref="EcharRef" style="width: 300px; height: 300px"></div>
</template>

如下圖所示：

第四步：ref獲取創(chuàng)建的Dom結構

通過ref獲取到創(chuàng)建的Dom結構 (！?。。?！Dom加載完成的生命周期?。。。?！)

  const main = this.$refs.EcharRef;

如下圖所示

第五步：初始化圖表

init（）初始化圖表（到這里基礎的引入工作已經完成了）

  const myChars = echarts.init(main);

如下圖所示

第六步：配置對應的option數據

需要配置對應的option數據可以采用對象拼接的數據

如下圖所示：

第七步：setOption方法進行數據的設置

通過setOption方法進行數據的設置

   myChars.setOption(this.options);

如下圖所示

三、完整代碼如下（包含父組件中的傳值,Vue3中Vue2的分寫法）

父組件（echars父組件傳值格式）

      <EcharsCommon :seriesOpeion="{series:[
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]}"></EcharsCommon>

子組件（echars子組件封裝）

這個是定義的公用組件Echars（子組件）

<template>
  <div ref="EcharRef" style="width: 300px; height: 300px"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
//第一步：先在官網中的指令進行安裝
// npm install echarts --save
//第二步：導入echarts
import * as echarts from "echarts";

export default defineComponent({
  //第三步：創(chuàng)建Dom結構（并且設定div的大?。┯脕韊chars圖表
  //第四步：通過ref獲取到創(chuàng)建的Dom結構 (！?。。?！Dom加載完成的生命周期！?。。。?
  mounted() {
    const main = this.$refs.EcharRef;
    //第五步：初始化咱們的圖表內容（到這里基礎的引入工作已經完成了）
    const myChars = echarts.init(main);
    //第六步：需要配置對應的option數據可以采用對象拼接的數據
    //第七步：通過setOption進行數據的設置
    myChars.setOption(this.options);
  },
  //父組件傳過來的數據
  props: {
    seriesOpeion: [Array, Object],
  },
  //使用計算屬性進行合并
  computed: {
    options() {
      return Object.assign(this.baseOption, this.seriesOpeion);
    },
  },
  data() {
    return {
      /* 一些配置項的設置內容 */
      baseOption: {
        //標題
        titile: {
          text: "測試折線圖",
        },
        //legend圖例的設置 plain是橫向排，scroll是垂直排（具體屬性請對照官方文檔）
        legend: {
          type: "plain",
        },
        //X軸設置
        xAxis: {
          type: "category",
          name: "日期",
          data: [1, 2, 3, 4, 5, 6, 7],
        },
        //y軸數據
        yAxis: {
          type: "value",
          name: "數量",
        },
        //鼠標懸浮在圖表上的tip提示(這里的trigger屬性需要重視：axis是折線等，itme是扇形等)
        tooltip: {
          trigger: "axis",
        },
        //工具欄的對應設置，詳細內容可以閱讀文檔
        toolbox: {
          feature: {},
        },
      },
    };
  },
  
});
</script>

四、Vue3的寫法完整寫法如下(setup篇)

展示效果如下

第一種數據結構(入門)

第二種數據結構展示圖(復雜,可按需配置)

代碼圖解,如下所示:

完整的使用代碼如下:

<script setup lang="ts">
//1.導入echarts
import * as echarts from 'echarts';
import { Ref, ref, onMounted } from 'vue'
//2.事先外部聲明的一些圖表結構(如果是使用公共組件的話,這里可以用函數進行封裝+對數據進行處理的函數)
import {options,option} from './dataScource'

//3.獲取定義的Dom模板
const echarsDom:Ref<HTMLElement|any> = ref(null)

//4.在組件掛載的生命周期中獲取到DOm節(jié)點
onMounted(() => {
    //5.創(chuàng)建echarts初始化對象
    const myEcharts = echarts.init(echarsDom.value);
    //6.校驗表結構是否存在,存在就渲染
    options && myEcharts.setOption(option);
})

</script> 

<template>

    <!-- 創(chuàng)建一個div去顯示echarts -->
    <div ref="echarsDom" style="width: 800px;height: 600px;"></div>

</template>