vue3中如何使用echarts

在 vue3 中使用 echarts，需要先安装 echarts 和 vue-echarts 两个依赖包。具体步骤如下：

1. 安装 echarts 和 vue-echarts：`npm install echarts vue-echarts@5.0.0-beta.2`

2. 在需要使用的组件中导入 vue-echarts：`import { use } from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; import { BarChart } from 'echarts/charts'; import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'; import { VueECharts } from 'vue-echarts';`

3. 注册 echarts 组件：`use([CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent]); app.component('v-chart', VueECharts);`

4. 在组件中使用 v-chart 标签，并传入 options 配置项：`<v-chart :options="chartData"></v-chart>`

其中，chartData 是一个对象，用于配置 echarts 图表的各种参数，例如：

chartData: {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10,20]
  }]
}