Vue项目集成ECharts，并绘制折线图

在Vue项目集成Echarts步骤如下：

        1 下载Echarts依赖

npm install echarts --save或cnpm install echarts --save

        2 在项目的main.js文件引入依赖

// 引入echarts
let echarts = require('echarts')
Vue.prototype.$echarts = echarts

        3 在具体页面使用

        1）在div标签里说明绘制的折线图的id

<div id="lineChart" style="width: 100%;height: 300px;"></div>

        2）绘制折线图

export default {
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('lineChart'));
                // 绘制图表
                myChart.setOption({
                     xAxis: {
                        data: ['A', 'B', 'C', 'D', 'E']
                      },
                     yAxis: {},
                     series: [
                        {
                          data: [10, 22, 28, 23, 19],
                          type: 'line',
                          smooth: true
                        }
                      ]
                });
            }
        }
}

当然，这只是最简单的ECharts组件的折线图绘制示例，其他图表的具体绘制和参数配置可以查看官方文档：https://echarts.apache.org/zh/index.html