如何在 Vue3 + Ts + Vite 中使用 ECharts并封装为全局组件

前言

在现代前端开发中，Vue3、TypeScript 和 Vite 已经成为了非常流行的技术组合。而 ECharts 则是一个强大的数据可视化库，可以帮助我们在项目中创建各种精美的图表。本文将介绍如何在 Vue3 + Ts + Vite 项目中封装ECharts组件。

一、前期准备

确保你已经安装了 Node.js 和 npm。如果没有安装，可以从Node.js 官网下载并安装。
创建一个新的 Vue3 + Ts + Vite 项目。可以使用以下命令：

 npm init vite@latest my-project -- --template vue-ts

进入项目目录并安装依赖：

cd my-project
npm install

二、安装 ECharts

在项目中安装 ECharts，可以使用以下命令：

 npm install echarts --save

三、在 Vue3 组件中使用 ECharts

创建一个新的 Vue 组件，例如EchartsComponent.vue。在这个组件中，我们将使用 ECharts 来创建一个简单的柱状图。

<script lang="ts" setup>
import * as ECharts from 'echarts'
import { ref, onMounted, watch, shallowRef } from 'vue'
const chartDom = shallowRef()
const myChart = shallowRef()
const loading = ref<boolean>(false)
type PropsType = {
    options: any
}
const props = withDefaults(defineProps<PropsType>(), {
    options: null
})
const resizeHandler = () => {
    myChart.value.resize()
}
const init = (option: any) => {
    loading.value = true
    if (option && myChart) {
        setTimeout(() => {
            if (!myChart.value) {
                myChart.value = ECharts.init(chartDom.value)
            }
            myChart.value.setOption(props.options, true)
            window.addEventListener('resize', resizeHandler)
            loading.value = false
        }, 500)
    } else {
        loading.value = false
    }
}

onMounted(() => { init(props.options) })

watch(() => props.options, (n) => {
    init(n)
}, {
    deep: true
})
</script>
// dom
<template>
    <div v-loading="loading" class='ued-chart' ref="chartDom"></div>
</template>

在App.vue文件中使用这个组件：

 <template>
     <div>
       <EchartsComponent :options="option"/>
     </div>
  </template>

 <script lang="ts" setup>
  	import EchartsComponent from './EchartsComponent.vue'
 </script>

四、总结

通过以上步骤，我们成功地在 Vue3 + Ts + Vite 项目中封装了 ECharts组件。你可以根据自己的需求修改图表的配置和数据，以实现更加复杂的数据可视化效果。ECharts 提供了丰富的图表类型和配置选项，可以满足各种不同的可视化需求。希望本文对你有所帮助。