vue3中使用echarts

在vue3中使用echarts可以按照以下步骤进行：

1. 安装echarts

npm install echarts --save

2. 在vue组件中引入echarts

import echarts from 'echarts'

3. 在vue组件中创建echarts实例并设置图表配置项

<template>
  <div id="chart"></div>
</template>

<script>
export default {
  mounted() {
    // 创建echarts实例
    const chartDom = document.getElementById('chart')
    const myChart = echarts.init(chartDom)

    // 配置项
    const option = {
      // ...
    }

    // 设置图表配置项
    myChart.setOption(option)
  }
}
</script>

4. 在vue组件中更新echarts图表

如果需要在组件中更新echarts图表，可以通过在组件中定义`myChart`实例，然后在组件的生命周期函数`mounted`中初始化，然后在数据更新时使用`setOption`方法更新图表数据。

<template>
  <div id="chart"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      chartData: []
    }
  },
  mounted() {
    // 创建echarts实例
    const chartDom = document.getElementById('chart')
    this.myChart = echarts.init(chartDom)

    // 配置项
    const option = {
      // ...
    }

    // 设置图表配置项
    this.myChart.setOption(option)
  },
  watch: {
    chartData() {
      // 更新图表数据
      this.myChart.setOption({
        series: [{
          data: this.chartData
        }]
      })
    }
  }
}
</script>