最近项目中数据展示，需要引入n个相同的echarts，为了减少代码冗余，故封装一个组件。

1. 建两个.vue文件，关系为父子组件，如： analysis.vue(父组件)，analysisChart.vue(子组件，也就是要封装的echart内容)

2. 父组件中需要传递给子组件中需要的数据，我所用的需要这几个数据：

id：子组件（图表）实例化需要一个唯一的id;
time： x轴的显示数据, 可以自定义参数；
data： 用来配置series的系列列表，可以自定义参数；
unit： y轴单位显示， 可以自定义参数；(我这边不需要，故后文中无该项)；
title： 图标系列标记，可以自定义

 <line-chart id="fundChart" :time= "fundaDate" :data= "fundaValue" :title= "chartNames[0]" ></line-chart>  <!-- 传递在子组件prop选项里约定好的数据 -->
                    

3.我封装的子组件

<template>
    <div :id="id" class= "container"></div>
</template>
<script>
    // 引入基本模板
	let echarts = require('echarts/lib/echarts');
	// 引入折线图组件
    require('echarts/lib/chart/line');
    // 引入提示框和图例组件
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/legend'; 
     
    let _this;
    export default{
		components:{
        },
        props: {
            id: String,
            time: Array,
            data: Array,
            title: String,
        },
        data:function(){
            return{
                name: 'lineChart',
                chartView: null,//图表绘画
            }
        },
        created(){
            _this=this;
        },
        computed:{  
        },
        mounted:function(){
            _this.initChart();

        },
        beforeDestroy(){
            if (!_this.chartView) {
                return;
            }
            _this.chartView.dispose();
            _this.chartView = null;
        },
        watch:{
            time:{
                handler(newValue,oldValue){
                    _this.initChart();
                }
            },
            data: {
                handler(newValue,oldValue){
                    _this.initChart();
                }
            }
        },
        methods:{
            initChart: function(){
                _this.chartView = echarts.init(document.getElementById(_this.id));

                _this.chartView.setOption(//创建图标配置数据
                    {
                        tooltip: {//鼠标悬浮交互时的信息提示
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            },
                            formatter: function (data) {
                                return "value" + ':' + data[0].value + '<br>'
                                +  "date"  + ':' + data[0].name + '<br>';
                            },

                        },
                        title: {
                            left: 'center',
                            text: _this.title,
                            textStyle:{
                                color: '#fff',
                            }
                        },
                        legend: {
                            top: 'bottom',
                            data: _this.data,
                            textStyle:{
                                color: '#fff',
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: _this.time,
                            axisLine:{
                                lineStyle:{
                                    color: '#fff',
                                }
                            }
                        },
                        yAxis: {
                            type: 'category',
                            boundaryGap: false,
                            nameTextStyle: {
                                fontSize: 16,
                            },
                            axisLine:{
                                lineStyle:{
                                    color: '#fff',
                                }
                            },
                            axisLabel: {
                                interval: 0,
                                formatter:function(value){  //y轴文字格式化
                                    let str = ""; 
                                    let num = 7; //每行显示字数 
                                    let valLength = value.length; //该项y轴字数  
                                    let rowNum = Math.ceil(valLength / num); // 行数  
                                    
                                    if(rowNum > 1) {
                                        for(var i = 0; i < rowNum; i++) {
                                            var temp = "";
                                            var start = i * num;
                                            var end = start + num;
                                            
                                            temp = value.substring(start, end) + "\n";
                                            str += temp; 
                                        }
                                        return str;
                                    } else {
                                        return value;
                                    } 
                                }
                            },
                            data: ["Strong Sell","Sell","Neutral","Buy","Strong Buy"],
                        },
                        dataZoom: [
                            {
                                type: 'inside',
                                start: 0,
                                end: 100,
                                
                            },{
                                start: 0,
                                end: 100,
                                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                                handleSize: '80%',
                                handleStyle: {
                                    color: '#fff',
                                    shadowBlur: 3,
                                    shadowColor: 'rgba(0, 0, 0, 0.8)',
                                    shadowOffsetX: 2,
                                    shadowOffsetY: 2
                                },
                                backgroundColor: '#fff',
                                textStyle: {
                                    color: '#fff'
                                }
                                
    
                            }
                        ],
                        series: [
                            {
                                name:'模拟数据',
                                type:'line',//图表类型，必要参数！
                                smooth:true,//折线图类型时,平滑曲线显示，smooth为true时lineStyle不支持虚线
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    show: true,
                                    normal: {
                                        color: 'rgb(255, 70, 131)'
                                    }
                                },//折线图线的颜色
                                areaStyle: {
                                    normal: {
                                        color: 
                                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: 'rgb(255, 158, 68)'
                                                }, {
                                                    offset: 1,
                                                    color: 'rgb(255, 70, 131)'
                                                }
                                            ])
                                    }
                                },//区域填充样式
                                data: _this.data,
                            }
                        ]
                    }
                )  
            } 
        },
    }
</script>
<style lang="scss">
.container{
    height: 100%;
    width: 100%;
}
</style>

4.引用echarts组件的父组件必须宽和高

5. 最后实现的效果

小菜鸟一个，若有错误和更好的建议，欢迎留言

-------------------------------------2019.06.06--------------------------------------
以上为更改过的代码：
引用过程中，遇到了，刚开始加载的时候只显示最后一个echarts图像，结局方案参考该链接：
https://www.cnblogs.com/goloving/p/9114236.html