vue3中使用vue-echarts

在Vue 3项目中使用vue-echarts，你可以按照以下步骤进行操作：

1. 首先，在你的Vue 3项目中安装vue-echarts依赖：

npm install vue-echarts echarts

2. 在你的App.vue文件中导入echarts和vue-echarts，并使用provide将echarts实例提供给子组件：

import { createApp, provide } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, ToolboxComponent, DataZoomComponent, LegendComponent } from 'echarts/components'

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent, ToolboxComponent, DataZoomComponent, LegendComponent])

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

app.use(provide, 'echarts', echarts)

3. 在需要使用echarts的组件中，通过inject获取echarts实例，并使用相应的echarts选项进行图表的渲染，例如：

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

<script>
import { inject, onMounted } from 'vue'

export default {
  name: 'ChartComponent',
  setup() {
    const echarts = inject('echarts')

    onMounted(() => {
      const chart = echarts.init(document.getElementById('chart'))
      chart.setOption({
        // 设置相应的echarts选项
      })
    })
  }
}
</script>