vue3调用echarts

在Vue3中调用Echarts，可以使用vue-echarts-next插件。具体步骤如下：

1. 安装vue-echarts-next插件

npm install vue-echarts-next

2. 在需要使用Echarts的组件中引入插件

import ECharts from 'vue-echarts-next'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'

// 注册必要的组件
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])

export default {
  components: {
    ECharts
  }
}

3. 在模板中使用Echarts组件

<template>
  <div>
    <e-charts :options="chartOptions" :auto-resize="true"></e-charts>
  </div>
</template>

4. 在组件的data中定义Echarts的options

export default {
  data() {
    return {
      chartOptions: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'bar'
        }]
      }
    }
  }
}

以上就是在Vue3中调用Echarts的步骤，需要注意的是，插件中使用了Vue3的Composition API，如果不熟悉该API的使用，可以先学习一下。