dz-app/pages/topic-center/paper-objective/components/recent-detail-chart.vue

<template>
    <mx-echarts :option="option" canvas-id="recent-detail-chart"/>
</template>

<script>
export default {
    name: "recent-detail-chart",
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            option: null
        }
    },
    watch: {
        data: function () {
            this.updateOption()
        }
    },
    mounted() {
        this.updateOption()
    },
    methods: {
        updateOption() {
            const xData = []
            const yData = []
            if (Array.isArray(this.data)) {
                this.data.forEach(i => {
                    xData.push(i.text)
                    yData.push(i.value)
                })
            }
            this.option = {
                color: ['#4F87FC'],
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: yData,
                    type: 'line',
                    smooth: true
                }]
            };
        }
    }
}
</script>

<style scoped>

</style>