vue3 echarts 怎么用

以下是使用Vue3和Echarts的示例代码：

1.首先，您需要安装Echarts和Vue3：

npm install echarts --save
npm install vue@next --save

2.在Vue组件中引入Echarts：

import { defineComponent } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  data() {
    return {
      chartData: [
        { name: '数据1', value: 100 },
        { name: '数据2', value: 200 },
        { name: '数据3', value: 300 },
        { name: '数据4', value: 400 },
        { name: '数据5', value: 500 }
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('chart')
      const myChart = echarts.init(chartDom)
      const option = {
        title: {
          text: 'Echarts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: this.chartData.map(item => item.name)
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.chartData.map(item => item.value)
        }]
      }
      myChart.setOption(option)
    }
  },
  render() {
    return (
      <div id="chart" style="width: 600px; height: 400px;"></div>
    )
  }
})

3.在Vue应用程序中使用组件：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

在上面的代码中，我们定义了一个名为“App”的Vue组件，该组件使用Echarts绘制了一个简单的柱状图。在组件的“mounted”生命周期钩子中，我们调用了“initChart”方法来初始化图表。在“initChart”方法中，我们使用Echarts的API来设置图表的选项和数据，并将其渲染到DOM元素中。