公司最近在用vue开发项目，项目接近尾声了，趁休息时间写点demo——

vue引入echarts（折线图的demo）

主要是解决引入echarts，markline的使用（基准线）
这是demo的效果图：
vue脚手架不多赘述

1.安装依赖

  cnpm install echarts -S

2.在main.js中引入echarts

   import echarts from 'echarts'

3.在main.js中安装

 Vue.prototype.echarts = echarts; 

一般来说能正常挂载上组件，就可以在页面中正常使用了
废话不多说上代码（因为自己也是小白阶段所以写的注释多了点，以便以后使用）

1.HTML部分

<template>
	<div class="content">
		<p class="prompt_p">&nbsp;&nbsp;&nbsp;近七天温度折线图</p>
		<div class="seven_echarts"  id="seven"> 
		</div>
	</div>	
</template>

2.js部分

<script type="text/javascript">
	export default{
		data(){
			return{	
                seven_chart:null,
				month_chart:null,
                seven_option : {
				    title : {
				    	 // text: '未来一周气温变化',//感觉头部有点乱，没使用自带的标题
				        // subtext: '纯属虚构'
                        x: 'left',
                        align: 'center'
                    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['最高气温','最低气温',]
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    toolbox: {
				        feature: {
				            magicType: {type: ['line', 'bar']},//柱状图和西和折线图切换
				            restore: {},//刷新
				            saveAsImage: {},//将图表以折线图的形式展现
				        }
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: ["11-26","11-27","11-28","11-29","11-30","12-01","12-02"]
				    },
				    yAxis: {
				    	name:"℃",
				        nameLocation: 'end',
				    	type: 'value',
				        axisLabel: {
				            formatter: '{value} '
				        }
				    },
				    series: [
				   		{
				            name:'最低气温',
				            type:'line',
				            data:[0,-1,-3,-4,0,-2,-4],
				            lineStyle:{//设置折线色颜色
                 				color:'#3f89ec'
        					},
        					itemStyle:{//设置折线折点的颜色
						            normal : {
						                color:'#3f89ec'
						        }
        					}
				        },
				    	{
				            name:'最高气温',
				            type:'line',
				            data:[9,10,6,7,12,11,8],
				            lineStyle:{//设置折线色颜色
             			    		color:'black'
        					},
        					itemStyle:{//设置折线折点的颜色
						            normal : {
						                color:'black'
						        }
        					}			            
				        },
				        {
				            name:'平行于y轴的趋势线',
				            type:'line',
				            markLine: {
				                name:'aa',
				                data: [
					                {
	        							name: '0℃标准线',
	       								yAxis: 0,
	       								    lineStyle:{//设置折线色颜色
	                 							color:'red'
	        								},
	    							},
    							],
    							symbol: ['arrow', 'none'],//将箭头向左  默认值是向右的
    							label:{
    								show:true,
                					position:'middle',//markline描述位于中间   right，left，middle
                					formatter: '{b}: {c}',//显示name中的描述
								}

				            }
				        }
				        
				    ],
				},
			}
		},
		mounted:function (){
			this.get_echarts();
		},
		methods:{	
			get_echarts:function(){
				this.seven_chart = this.echarts.init(document.getElementById("seven"));
				// 把配置和数据放这里
				this.seven_chart.setOption(this.seven_option)              
			}
        },
        beforeDestroy() {
            if (!this.seven_chart) { return }
            this.seven_chart.dispose();
            this.seven_chart = null;
        },
	}
</script>

3.css部分

<style type="text/css">
.content{
	width: 100%;
}
.content p{
	margin-top: 1rem;
	font-size: 0.4rem;
	color: #666666;
}
.seven_echarts{
	height: 11rem;
	width: 94%;
}
</style>

好了结束，本人目前还是前端的小白，如有错误欢迎指正，以后会不定期更新哟！