echarts图表初始化搭建

 vue搭建echarts折线图

Examples - Apache ECharts

<template>
    <div>
        <div ref="chart" class="chart-container"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'LineChart',
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 获取 DOM 元素
            const chartDom = this.$refs.chart;
            const myChart = echarts.init(chartDom);

            // 配置图表数据
            const option = {
                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'
                    }
                ]
            };

            // 设置图表
            myChart.setOption(option);

            // 监听窗口大小变化，自动调整图表大小
            window.addEventListener('resize', () => {
                myChart.resize();
            });

            // 在组件销毁时清理 ECharts 实例
            this.$once('hook:beforeDestroy', () => {
                myChart.dispose();
            });
        }
    }
};
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 400px;
    /* 设定高度，否则图表无法显示 */
}
</style>