vue3中如何使用echarts画图

在 Vue3 中使用 Echarts 有多种方法，以下是其中两种常用的方法：

1. 使用 Echarts 官方提供的 vue-echarts 组件

首先需要安装 vue-echarts 组件：

npm install vue-echarts@5.0.0-rc.2 echarts@^5.0.0

然后在需要使用 Echarts 的组件中引入 vue-echarts 组件：

<template>
  <div class="echarts-container">
    <v-chart :options="chartOptions"></v-chart>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useECharts, useTheme } from 'vue-echarts'

export default defineComponent({
  setup() {
    const chartOptions = {
      // 在这里编写 Echarts 配置项
    }
    const echarts = useECharts()
    const theme = useTheme()

    return {
      chartOptions,
      echarts,
      theme
    }
  }
})
</script>

2. 使用 Echarts 的原生 API

如果你不想使用 vue-echarts 组件，也可以直接在 Vue3 中使用 Echarts 的原生 API。首先需要在 Vue3 的 setup 函数中初始化 Echarts 实例：

<template>
  <div class="echarts-container"></div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import * as echarts from 'echarts'

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

    onMounted(() => {
      const myChart = echarts.init(chartRef.value)
      // 在这里编写 Echarts 配置项
      myChart.setOption({
        // 在这里编写 Echarts 配置项
      })
    })

    return {
      chartRef
    }
  }
})
</script>

以上是两种常用的在 Vue3 中使用 Echarts 的方法，你可以根据自己的需求选择合适的方式。