Vue3 で ECharts をオンデマンドで導入します (一目でわかります)

使用の背景: たとえば、エンジニアリングプロジェクトに取り組んでおり、棒グラフと折れ線グラフのみを使用している場合、すべての echarts コンポーネントがプロジェクトに導入されると、ユーザーがページを開く速度とプロジェクトのパフォーマンスに影響します。したがって、高度なプログラミングエンジニアになるためには、必要に応じて紹介する必要があります。

1: インストールのための古い手順についてはもう無意味です

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

2: 新しい js ファイルを自分で作成し (適当に名前を付けます)、ここでは echarts.js と呼び、js 専用のフォルダーに置きます。

3: echarts.js ファイルの内容 (存在する必要があります)

// 引入 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: 作成した 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}
}
 
//调用的时候就是 ：  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);
      // 根据页面大小自动响应图表大小
      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: レンダリングは次のとおりです (成功したら、戻ってきて親指を立ててください、ゲストオフィサー)

7. ここで注意する必要があります (オンデマンドでインポートするチャートの末尾は Chart で、先頭は公式 Web サイトの凡例の英語名です。最初の文字は大文字にする必要があることに注意してください。図を参照してください)下に）

Vue3 で ECharts をオンデマンドで導入します (一目でわかります)

おすすめ