vue3+ts封装echarts

npm install echarts 

• data存储在文件夹下的全国地图数据
• hooks包装了文件夹hook
• src下面是组件视图
• index.ts为公共导出

<template>   <div class="base-echart">     <div ref="echartDivRef" :style="{ width: width, height: height }"></div>   </div> </template>  <script setup lang="ts"> import { 
         ref, onMounted, defineProps, withDefaults, watchEffect } from 'vue'  import { 
         EChartsOption } from 'echarts'  import useEchart from '../hooks/useEchart' //定义props const props = withDefaults(   defineProps<{ 
             width?: string     height?: string     options: EChartsOption   }>(),   { 
             width: '100%',     height: '360px'   } )  const echartDivRef = ref<HTMLElement>() onMounted(() => { 
           const { 
         setOptions 
       
        } 
        = 
        useEchart
        (echartDivRef
        .value
        !
        ) 
        watchEffect
        (
        (
        ) 
        => 
        { 
          
        setOptions
        (props
        .options
        ) 
        }
        ) 
        }
        ) 
        <
        /script
        > 
        <style lang
        =
        "scss" scoped
        >
        <
        /style
        > 
       

import BaseEchart from './src/base-echart.vue'

export default BaseEchart

hooks下useEchart.ts内容如下

import * as echarts from 'echarts'
import ChinaMapData from '../data/china.json'
echarts.registerMap('china', ChinaMapData)
export default function (el: HTMLElement) { 
        
  const echartInstance = echarts.init(el)
  const setOptions = (options: echarts.EChartsOption) => { 
        
    echartInstance.setOption(options)
  }
  const updateSize = () => { 
        
    echartInstance.resize()
  }
  window.addEventListener('resize', () => { 
        
    echartInstance.resize()
  })
  return { 
        
    echartInstance,
    setOptions,
    updateSize
  }
}