详细解释vue3 setup语法糖+ts下echarts的使用

萌新第一次用echarts感觉有点不明白整体的运行顺序和流程，遂记录此文。

首先利用vite创建一个vue3组合式项目，然后删掉所有无关代码

安装引入echarts

npm install echarts --S

声明一个chart变量保存echarts实例，并且告诉 TypeScript 变量的类型，这样在使用 chart 时，可以获得类型检查和智能提示，当你输入，chart. 时，会自动提示 echarts.ECharts 类型的方法和属性。

let chart:echarts.ECharts

设置属性别名，这样就可以用EChartsOption表示echarts.EChartsOption

type EChartsOption = echarts.EChartsOption

定义一个简单的echarts配置项案例，并且声明类型

const option: EChartsOption = {
   
  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生命周期钩子发生在组件被挂载之后，所以此时在 chartRef引用的 DOM 元素上初始化 ECharts 实例，并将图表配置选项 option 应用到 ECharts 实例中

<template>
  <div class="echarts" ref="chartRef"></div>
</template>