vue3 ts安装、配置echarts

pnpm add echarts --save

新建echarts.ts文件

// /src/utils/echarts.ts
// 摘抄echarts官网：https://echarts.apache.org/handbook/zh
import * as echarts from 'echarts/core'
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from 'echarts/charts'
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])

export default echarts

在mian.ts导入echarts 

import { createApp } from 'vue'
import './style.css'
import eCharts from '@/utils/echart'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$eCharts = eCharts
app.mount('#app')

最后直接使用

<template>
  <div ref="chartEx" style="width: 100vw; height: 30vh"></div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue'
import { ECOption } from '@/utils/echart'

// 获取echarts
const app: any = getCurrentInstance()
const eCharts: any = app.appContext.config.globalProperties.$eCharts
// 基于准备好的dom，初始化echarts实例
const chartEx: any = ref(null)
const option: ECOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}

onMounted(() => {
  // 初始化图表
  const myChart = eCharts.init(chartEx.value)
  myChart.setOption(option)

  // 窗口大小变化时重新设置图表容器高度
  const resizeHandler = () => {
    myChart.resize()
  }

  window.addEventListener('resize', resizeHandler)

  // 在组件卸载时移除事件监听器
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeHandler)
  })
})
</script>

<style scoped></style>