Vue2使用echarts和Vue3使用echarts

Vue2

main.js

import Vue from 'vue';
//echarts5.0 版本后需要用import * 引入
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

Echarts.vue组件

<template>
  <div id="container" :style="{ width: '300px', height: '300px' }"></div>
</template>

<script>
export default {
  mounted() {
    const charts = this.$echarts.init(document.getElementById("container"));
    charts.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style>
</style>

Vue3

main.js

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

const app = createApp(App)
app.config.globalProperties.$echarts = echarts;
app.mount('#app');

Echarts.vue组件

<template>
  <div ref="container" :style="{ width: '300px', height: '300px' }"></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
export default {
  name: "echarts",
  setup() {
    const container = ref(null);
    onMounted(() => {
      const chart = echarts.init(container.value);
      // 绘制图表
      chart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    });
    return {
      container,
    };
  },
};
</script>

<style>
</style>

报错点：

1. 报getAttribute undefined  可能是没有拿到放置echarts的dom元素
2. 报init undefined  可能是echarts没有挂载到原型上

在mounted输出一下就知道是哪个问题了。