Introduce ECharts on demand in Vue3 (you will know it at a glance)

Usage background: For example, if you are working on an engineering project and only use bar charts and line charts, if all echarts components are introduced into the project, it will affect the speed of users opening the page and the performance of the project. Therefore, to be a high-level programming engineer, we need to introduce them as needed.

 1: No more nonsense about the old steps for installation

npm install echarts --save
 
有淘宝镜像的可以选择  (安装速度快)
cnpm install echarts --save

 2: Create a new js file yourself (name it casually), here we call it echarts.js, and place it in a folder dedicated to js.

3: Contents in the echarts.js file (must exist)

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
 
/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart } from "echarts/charts";
 
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 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: Introduce the echarts.js file you created into the global 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}
}
 
//调用的时候就是 ：  this.$echarts.init()

5: Use in the page (example below)

<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);
      // 根据页面大小自动响应图表大小
      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);
      // 根据页面大小自动响应图表大小
      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: The rendering is as follows (if you succeed, come back and give me a thumbs up, guest officer)

7. You need to pay attention here (the suffix of the charts you want to import on demand is Chart , and the beginning is the English name of the legend on the official website. Note that the first letter must be capitalized, see the picture below)