ai问答：使用 Vue3 组合式API 和 TS 封装 echarts 折线图

使用这个组件时，只需要传入合适的chartData数组，就可以渲染一个折线图，并且响应数据变化。

<template>

    <div ref="chart" style="height: 500px;"></div>

</template>

<script lang="ts">

import { ref, onMounted, watch } from 'vue'

import * as echarts from 'echarts'

export default {

    props: {

        chartData: {

            type: Array as () => any[],

            required: true

        }

    },

    setup(props: { chartData: any[] }) {

        // 初始化echarts实例

        let chart = ref<echarts.EChartsType>(null)

        // 初始化chart

        onMounted(() => {

            let myChart = echarts.init(chart.value!)

            setOption()

        })

        // 设置图表option

        let setOption = () => {

            chart.value!.setOption({

                xAxis: {

                    type: 'category',

                    data: props.chartData.map(d => d.name)

                },

                yAxis: {

                    type: 'value'

                },

                series: [{

                    data: props.chartData.map(d => d.value),

                    type: 'line'

                }]

            })

        }

        // 更新chart数据

        let updateData = () => {

            setOption()

        }

        // 监听chartData变化,更新chart

        watch(props.chartData, () => {

            updateData()

        })

        return {

            chart,

            updateData

        }

    }

}

</script>

接收props.chartData为一个对象数组
x轴和series的数据从chartData数组映射得来
其他配置根据折线图设置
数据更新时通过调用updateData更新图表

ai问答：使用 Vue3 组合式API 和 TS 封装 echarts 折线图的相关教程结束。