526互联

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

发布时间 2023-04-23 17:29:38作者: 让梦想纵横
<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更新图表

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