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

合集 - ai问答(7)

1.ai问答：使用 Vue3 组合式API 和 TS 封装 echarts 折线图2023-04-23

2.ai问答：使用vite如何配置多入口页面2023-04-233.ai问答：使用 Vue3 组合式API 和 TS 父子组件共享数据2023-04-244.ai问答：使用 Vue3 组合式API 和 TS 封装 websocket 断线重连2023-04-245.ai问答：使用 Vue3 组合式API 和 TS 配置 axios 拦截器 http错误状态2023-04-246. ai问答：vue3+pinia+WebSocket 封装断线重连（实战）2023-05-087. ai问答：Vue3中使用computed和watch监听pinia数据的区别2023-06-09

收起

使用这个组件时，只需要传入合适的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更新图表