const app = createApp(App); app.config.globalProperties.$echarts = ECharts; vue3组件里怎么用$echarts

在 Vue 3 中，我们可以使用 `app.config.globalProperties` 来挂载全局变量或方法，比如上述代码中使用 `$echarts` 挂载了 `ECharts` 对象。然后在 Vue 组件中就可以通过 `this.$echarts` 来使用 `ECharts` 对象了。

下面是一个简单的使用示例：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  mounted() {
    // 使用 this.$echarts 来获取 ECharts 对象
    const chart = this.$echarts.init(this.$refs.chart);

    // 使用 ECharts API 来配置图表
    chart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 5]
      }]
    });
  }
}
</script>

在 `mounted` 钩子函数中，我们使用 `this.$echarts` 获取 ECharts 对象，并使用 ECharts API 来配置图表。需要注意的是，我们在模板中使用 `ref` 属性来获取图表容器的 DOM 元素，然后在 `mounted` 钩子函数中使用 `this.$refs.chart` 来获取这个 DOM 元素，并将其传递给 `echarts.init` 方法来初始化一个 ECharts 实例。