Führen Sie ECharts bei Bedarf in Vue3 ein (Sie werden es auf einen Blick erkennen)

Verwendungshintergrund: Wenn Sie beispielsweise an einem Ingenieurprojekt arbeiten und nur Balkendiagramme und Liniendiagramme verwenden und alle Echarts-Komponenten in das Projekt eingeführt werden, wirkt sich dies auf die Geschwindigkeit aus, mit der Benutzer die Seite öffnen, und auf die Leistung des Projekts. Um ein Programmieringenieur auf hohem Niveau zu sein, müssen wir sie daher nach Bedarf vorstellen.

 1: Kein Unsinn mehr über die alten Installationsschritte

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

 2: Erstellen Sie selbst eine neue js-Datei (benennen Sie sie beiläufig), hier nennen wir sie echarts.js und legen Sie sie in einem Ordner für js ab.

3: Inhalte in der Datei echarts.js (muss vorhanden sein)

// 引入 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: Fügen Sie die von Ihnen erstellte Datei echarts.js in die globale Datei main.js ein

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: Verwendung auf der Seite (Beispiel unten)

<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: Die Darstellung ist wie folgt (wenn Sie Erfolg haben, kommen Sie zurück und geben Sie mir einen Daumen hoch, Gastoffizier)

7. Hier müssen Sie aufpassen (das Suffix des Diagramms, das Sie bei Bedarf importieren möchten, ist Diagramm , und der Anfang ist der englische Name der Legende auf der offiziellen Website. Beachten Sie, dass der erste Buchstabe groß geschrieben werden muss, siehe Bild unten)