echarts在vue3中的使用（全局使用和按需使用）

echarts官方链接

全局使用

main.ts的代码中：

import { createApp } from 'vue';
import App from './App.vue';
import * as echarts from 'echarts';//引入echarts

const app = createApp(App);
app.config.globalProperties.$echarts = echarts;//全局使用
router.isReady().then(() => {
  app.mount('#app');
});

上文中globalProperties的介绍

组件中使用：

1. 先引入getCurrentInstance

import { getCurrentInstance } from "vue";

2. 实例化（变量名一定得是proxy）

const { proxy } = getCurrentInstance() as any;

4. 完整代码

<script lang="ts">
import { defineComponent, nextTick, onMounted, getCurrentInstance } from "vue";

export default defineComponent({
  name: "userSetting",
  setup() {
    const { proxy } = getCurrentInstance() as any;

    onMounted(() => {
      const option = {
        title: {
          text: userName + "的回复统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      nextTick(() => {
        const chartDom = <HTMLElement>document.getElementById("main");
        const myChart = proxy.$echarts.init(chartDom);
        myChart.setOption(option);
        window.onresize = function () {
          myChart.resize();
        };
      });
    });

    return {
      userName,
    };
  },
});
</script>

按需使用

官网里都有介绍

打开官网中的示例，选择你所需要的，点击之后会有完整代码，直接copy就可以了

注意点：

一定要给获取的DOM元素添加它的高宽，不然不会在页面中显示
由于在onMounted生命周期之前，组件未挂载完成，这时候使用document.getElementById的时候是个null值，会报错，所以要在onMounted这个生命周期中使用，或者用nextTick，个人推荐nextTick，因为它能够保证整个视图已经渲染完毕