echarts折线图前端vue2实现

要在 Vue2 中使用 ECharts 折线图，需要先安装 ECharts 库，然后按照以下步骤：

1. 安装 ECharts 库。

npm install echarts --save

2. 在 Vue 组件中引入 ECharts 库。

import echarts from 'echarts';

3. 在 Vue 组件中定义一个 ECharts 实例，并配置折线图的选项。

export default {
    data() {
        return {
            chart: null
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart);

            // 折线图的选项
            let option = {
                title: {
                    text: '折线图'
                },
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'line'
                }]
            };

            this.chart.setOption(option);
        }
    }
};

4. 在 Vue 模板中渲染折线图。

<template>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

以上就是在 Vue2 中使用 ECharts 实现折线图的基本步骤。需要注意的是，ECharts 还提供了丰富的配置选项，可以根据需求进行调整。另外，可以在组件销毁时调用 `this.chart.dispose()` 销毁 ECharts 实例。