echarts折线图、echarts折线图自定义样式

html

页面引用js 
<script type="text/javascript" src="assets/js/echarts.min.js"></script>

css和html
*{padding:0;margin:0;border: 0;}
<div id="container" style="width:630px;height:250px;margin:20px auto"></div>

js

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
	title : {
        // text: 'Monthly Repayment (estimated)',
        subtext: 'Renta：$/qft2',
        x:'left',
        top:10
    },	
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'line',
			lineStyle:{
				color:'#faa12f'
			},
			z:1
		},
		backgroundColor:'rgb(255,255,255)',
		extraCssText:'box-shadow:0 0 3px 3px rgba(0, 0, 0, 0.3)',
		textStyle:{
			color:'#333'
		},
	},     
    
    //x轴
    xAxis: {
        type: 'category',
//      boundaryGap: false,
//      splitLine:{show: false},//去除网格线
//      splitArea : {show : false},//去除网格区域

        data: ['3mth', '4mth', '5mth', '6mth', '7mth', '8mth', '9mth'],
        
        axisLine: {//x轴线设置
            lineStyle: {
                type: 'solid',
                color: '#f0f0f0',//x线的颜色
                width:'1'//坐标线的宽度
            }
        },
        axisLabel: {//x轴字体颜色
            textStyle: {
                color: '#949494',
            }
        },
        axisTick:{//去掉x轴刻度
        	show: false
        }        
    },
    yAxis: {
        type: 'value',
//      name: 'Renta：$/qft2',   
        splitLine:{//保留网格线
        	show: true,
			lineStyle:{//y轴网格线设置
                color: '#f9f9f9',
                width: 1,
                type: 'solid'
            }        	
        },
        splitArea : {show :false},//去除网格区域
        axisLine: {//y轴线设置
            lineStyle: {
                type: 'solid',
                color:'#f0f0f0',
                width:'1'
            }
        },
        axisLabel: {//y轴字体颜色
            textStyle: {
               color: '#949494'
            }
        },  
        axisTick:{//去掉Y轴刻度
        	show: false
        }
  
    },
    series: [{
        data: [1800, 2200, 3600, 3000, 2000, 2900, 2500],
        type: 'line',
        symbol:"circle",//设定为实心点  类型 ： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        symbolSize:6,//圆点大小
//      showSymbol:true,
        hoverAnimation:true,
        animation: true,
 
	    itemStyle: {
	        normal: {
	            color: "#faa12f",//圆点颜色
				borderColor:'rgba(251,222,153,0.5)',
				borderWidth:8,	            
	            
	            lineStyle: {//折线颜色大小
	            	type:'solid',  //'dotted'虚线 'solid'实线
	                color: "#faa12f",
	                width:1,
	                borderColor:'#faa12f',  //拐点边框颜色
	            }
	        }
	    },
	    
//      textStyle:{//x、y轴字体颜色大小
//	        fontSize:12,
//	        color:'#949494'
//      },    
                
                      
    }],

   
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

预览效果