vue3使用setup引入echarts

要在Vue 3中使用ECharts，可以按照以下步骤进行设置：

1. 安装echarts

使用npm或yarn安装echarts：

npm install echarts --save

或者

yarn add echarts

2. 在组件中引入echarts

在Vue组件的`<script>`标签中，引入echarts并将其赋值给一个变量，例如：

import echarts from 'echarts';

3. 在`<template>`中创建一个容器

在组件的`<template>`标签中，创建一个容器，它将用于显示echarts图表。例如：

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

4. 在`setup()`函数中创建echarts实例并初始化

在Vue 3中，可以使用`setup()`函数来创建echarts实例并初始化。例如：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const chartRef = ref(null);

    onMounted(() => {
      const chart = echarts.init(chartRef.value);
      chart.setOption({
        // 在这里设置echarts图表的配置项
      });
    });

    return {
      chartRef
    };
  }
};

在上面的示例中，我们使用了Vue 3的`ref()`和`onMounted()`函数来创建一个引用，并在组件挂载时初始化echarts实例。然后，我们可以在`return`语句中返回该引用，以便在`<template>`中使用。

5. 在`<template>`中使用echarts图表

最后，在`<template>`标签中，将echarts图表容器与`chartRef`引用绑定：

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

完成以上步骤后，您就可以在Vue 3中使用ECharts了。根据您的需求，您可以在`setup()`函数中设置echarts图表的配置项来创建不同类型的图表。