vue3+ts的开发中，echarts公共组件的封装使用。

首先是基础组件

<script setup lang="ts">
import type { BaseOptionType } from '@/types/OptionPropsType'
// props
// 定义参数类型
const props = defineProps<BaseOptionType>()
// 初始化echarts
const barEchart = ref()
onMounted(() => {
  let baseChart = props.echarts.init(barEchart.value)
  //   两种配置
  if (props.optionsFunc) {
    // 传入echarts和初始化后的实例
    baseChart.setOption(props.optionsFunc(props.echarts,baseChart))
  }
  // 如果直接是个对象 直接传入使用
  if (props.options) {
    baseChart.setOption(props.options)
  }
})
</script>

<template>
  <div ref="barEchart" class="baseChart"></div>
</template>
<style scoped>
.baseChart {
  width: 100%;
  height: 100%;
}
</style>

类型文件

// 取值的PICK   这部分也可以单独拆分到一个工具类型文件里
export type ProPick<T, K extends keyof T> = NonNullable<T[K]>
// 配置类型  我ts学的不太好，我不知道如何才能找到echatrts官方提供的各种类型，就自己写一些进行替代
export interface BaseOptionType {
  echarts?: any
  options?: {
    xAxis?: any
    yAxis?: any
    series: any[]
    [key: string]: any
  }
  optionsFunc?(echarts?: any,targetEcharts?:any): ProPick<BaseOptionType, 'options'>
}

当使用某种类型的图表时，建立衍生组件，示例：

<script setup lang="ts">
  import * as echarts from 'echarts/core'
  //  直接引入必要的echarts组件 然后引入echartsBaseVue使用即可 正常传参
  import { GridComponent, LegendComponent } from 'echarts/components'
  import { BarChart,LineChart } from 'echarts/charts'
  import { CanvasRenderer } from 'echarts/renderers'
  import echartsBaseVue from './echartsBase.vue'
  import type { BaseOptionType } from '@/types/OptionPropsType'
  echarts.use([GridComponent, BarChart, CanvasRenderer,LegendComponent,LineChart])
  // props 
  const props = defineProps<BaseOptionType>()
    </script>
<template>
  <echartsBaseVue 
    :options="props.options" 
    :options-func="props.optionsFunc" 
    :echarts="echarts">
    </echartsBaseVue>
</template>
<style scoped></style>

使用

<template>
<!--   外层盒子宽高决定了内部图表宽高 -->
  <div class="chart-box">
    <BarChartVue :options-func="chartOptionFunc"></BarChartVue>
  </div>
</template>

<script setup lang="ts">
import BarChartVue from '@/components/chartComponent/BarChart.vue'
  // 第一个参数为echarts对象  第二个能拿到的是初始化后的当前的echarts实例
function chartOptionFunc(echarts: any, baseChart: any) {
  // 配置初始状态对象  最好这个配置直接去echarts官方直接复制过来，方便又轻松
  const optionObj = {
    tooltip: {
    },
    grid: {
    },
    xAxis: {
    },
    yAxis: {},
    series: []
  }
  // 监听数据更新来更新图表 可以响应式更新图表内容
  watch(EnterpriseDistributionlabel, () => {
    baseChart.setOption(optionObj)
  })
  return optionObj
}
</script>

<style scoped>

</style>