vue3怎么写echarts

在 Vue 3 中使用 ECharts 需要执行以下步骤：安装 ECharts：npm install --save echarts。导入 ECharts：import * as echarts from 'echarts'。创建实例：在 mounted() 生命周期钩子中创建 ECharts 实例并附加到 ref。配置选项：配置 ECharts 选项，包括图表类型、数据和样式。销毁实例（可选）：在 beforeUnmount() 生命周期钩子中销毁 ECharts 实例。

Vue 3 中使用 ECharts

如何使用 ECharts？

在 Vue 3 应用中使用 ECharts，需要执行以下步骤：

1. 安装 ECharts：

   立即学习“前端免费学习笔记（深入）”；

   • npm install --save echarts

2. 导入 ECharts：

   • import * as echarts from 'echarts'

3. 创建实例：

   • 在 Vue 组件中，创建一个 ref 来引用 ECharts 实例：

     

     AITDK

     免费AI SEO工具，SEO的AI生成器

     下载
     • const chartRef = ref(null)

   • 在 mounted() 生命周期钩子中创建一个 ECharts 实例并附加到 ref：

     • mounted() { this.chartInstance = echarts.init(this.$refs.chartRef) }

4. 配置选项：

   • 配置 ECharts 选项，包括图表类型、数据和样式：

     • `this.chartInstance.setOption({
       ...
       })`

5. 销毁实例（可选）：

   • 在 beforeUnmount() 生命周期钩子中销毁 ECharts 实例：

     • beforeUnmount() { if (this.chartInstance) this.chartInstance.dispose() }

示例：

<code class="vue"><template>
  <div ref="chartRef"></div>
</template>

<script>
import { ref, mounted, beforeUnmount } from 'vue'
import * as echarts from 'echarts'

export default {
  setup() {
    const chartRef = ref(null)
    mounted() {
      this.chartInstance = echarts.init(this.$refs.chartRef)
      this.chartInstance.setOption({
        title: { text: 'Vue 3 ECharts Example' },
        series: [
          {
            type: 'pie',
            data: [
              { value: 1, name: 'A' },
              { value: 2, name: 'B' },
              { value: 3, name: 'C' },
            ],
          },
        ],
      })
    }
    beforeUnmount() {
      if (this.chartInstance) this.chartInstance.dispose()
    }
  },
}
</script></code>