快捷導(dǎo)航

Vue3中按需引入ECharts詳細步驟(一看就會)

更新時間：2023年09月27日 10:19:30 作者：得知此事須躬行

新項目采用Vue3作為前端項目框架,避免不了要使用echarts,這篇文章主要給大家介紹了關(guān)于Vue3中按需引入ECharts的相關(guān)資料,需要的朋友可以參考下

使用背景：比如做一個工程化項目，且只使用到柱狀圖和折線圖，如果把所有的echarts組件都引入到項目中的話，會影響用戶打開頁面的速度和項目的性能。所以對于做一個高逼格的程序工程師，我們需要按需引入。

1：廢話不多說老步驟安裝

npm install echarts --save
有淘寶鏡像的可以選擇  (安裝速度快)
cnpm install echarts --save

2：自己新建一個 js 文件（名字隨便起），這里我們就叫echarts.js，且放在專門放js的文件夾下。

3：echarts.js文件中的內(nèi)容（必須有的）

// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from "echarts/core";
/** 引入柱狀圖and折線圖圖表，圖表后綴都為 Chart  */
import { BarChart, LineChart } from "echarts/charts";
// 引入提示框，標(biāo)題，直角坐標(biāo)系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
// 標(biāo)簽自動布局，全局過渡動畫等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from "echarts/renderers";
// 注冊必須的組件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
]);
// 導(dǎo)出
export default echarts;

4：把自己創(chuàng)建好的echarts.js文件引入全局main.js中

import App from './App'
// 引入echarts
import echarts from './common/js/echarts.js'
import {createSSRApp} from 'vue'
let app = createSSRApp(App)
// 掛載到vue實例中
// Vue.prototype.$echarts = echarts;//vue2的掛載方式
app.config.globalProperties.$echarts = echarts;//vue3的掛載方式
export function createApp() {
	return {app}
}
//調(diào)用的時候就是 ：  this.$echarts.init()

5：在頁面中使用 (以下實例)

<template>
  <div>
    <div id="myEChartsBar"></div>
    <div id="myEChartsLine"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 基本柱形圖
    changeBar() {
      const myEChart= this.$echarts.init(document.getElementById("myEChartsBar"));
      const option = {
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [23, 24, 18, 25, 27, 28, 25],
          },
        ],
      };
      myEChart.setOption(option);
      // 根據(jù)頁面大小自動響應(yīng)圖表大小
      window.addEventListener("resize", function () {
        myEChart.resize();
      });
    },
    // 折線圖
    changeLine() {
      // 獲取組件實例
      const myEChart= this.$echarts.init(document.getElementById("myEChartsLine"));
      // 設(shè)置配置項
      const option = {
        xAxis: {
          data: ["A", "B", "C", "D", "E"],
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 43, 49],
            type: "line",
            stack: "x",
          },
          {
            data: [5, 4, 3, 5, 10],
            type: "line",
            stack: "x",
          },
        ],
      };
      // 復(fù)制
      myEChart.setOption(option);
      // 根據(jù)頁面大小自動響應(yīng)圖表大小
      window.addEventListener("resize", function () {
        myEChart.resize();
      });
    },
  },
  mounted() {
    this.changeBar();
    this.changeLine();
  },
};
</script>
<style lang="scss" scoped>
#myEChartsBar {
  min-width: 31.25rem;
  min-height: 31.25rem;
  // max-height: 500px;
}
#myEChartsLine {
  max-height: 500px;
  // max-height: 400px;
  height: 500px;
}
</style>

6：效果圖如下（成功了回來給我點個贊哈，客官）