详细解释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>

<script setup lang="ts">
import {onMounted, ref} from "vue"
import * as echarts from 'echarts'

type EChartsOption = echarts.EChartsOption

let chart:echarts.ECharts
let chartRef = ref()

onMounted(()=>{
  chart = echarts.init(chartRef.value)
  chart.setOption(option)
})


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'
    }
  ]
}


</script>

<style scoped>
.echarts{
  width: 800px;
  height: 500px;
  background-color: rgb(125,125,125,.7);
}
</style>

我们也可以把echarts初始化和应用配置项都放到initOption函数里，一步到位，不过还是要确保函数发生在chartRef.value 已经存在并且是一个有效的 DOM 元素（组件挂载完毕）之后。

const initOptions = () => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
    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'
        }
      ]
    }
    chart.setOption(option)
  }
}

echarts配置项相当丰富，读者在使用的时候可以根据自己的需要去echarts官网根据api文档和配置项文档自定义更改，当然也有很多社区案例，给大家安利一个echarts可视化社区，里面有很多案例供选择。

组件化使用

一般成熟的开发中，都是将echarts作为可复用的组件使用的，引入了父传子的props来传值，并且使用Vue提供的 PropType 来显式定义 props 的类型，

const props = defineProps({
  label:{
    type:Array as PropType<string[]>,
    default:() => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  data:{
    type:Array as PropType<number[]>,
    default:() => [150, 230, 224, 218, 135, 147, 260],
  }
})

const initOptions = () => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
    const option: EChartsOption = {
      xAxis: {
        type: 'category',
        data: props.label,
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: props.data,
          type: 'line'
        }
      ]
    }
    chart.setOption(option)
  }
}

此处也可以用简单但不安全的泛型参数直接指定props的类型

const props = defineProps<{
    data: any,
    label: any
}>();

然后在父组件中用v-bind语法将 rawData 中的数据传递给 myEcharts 组件的 data 和 label 属性，此处的rawData一般为后端返回的json字符串

<template>
  <myEcharts :data="rawData.data.data" :label="rawData.data.label"></myEcharts>
</template>
<script setup lang="ts">
import myEcharts from './myEcharts.vue'

const rawData = {
  data: {
    label:['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'],
    data: [
      2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
    ],
  }
}
</script>

更复杂的用法随着笔者学习可能会佛系更新。