使用背景：比如做一個工程化項目，且只使用到柱狀圖和折線圖，如果把所有的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";
 
// 引入提示框，標題，直角坐標系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
 
// 標簽自動布局，全局過渡動畫等特性
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,
]);
 
// 導出
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ù)頁面大小自動響應圖表大小
      window.addEventListener("resize", function () {
        myEChart.resize();
      });
    },
    // 折線圖
    changeLine() {
      // 獲取組件實例
      const myEChart= this.$echarts.init(document.getElementById("myEChartsLine"));
      // 設置配置項
      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",
          },
        ],
      };
      // 復制
      myEChart.setOption(option);
      // 根據(jù)頁面大小自動響應圖表大小
      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：效果圖如下 （成功了回來給我點個贊哈，客官）

7.這里需要注意（你想要按需引入的圖表后綴都是Chart，開頭就是官網(wǎng)上面的圖例英文名，注意首字母要大寫，?看下圖）?

?文章來源地址http://www.zghlxwxcb.cn/news/detail-566719.html

到了這里，關于Vue3中按需引入ECharts(一看就會)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！