echarts 双色折线图

echarts虽然提供了很多样例，但是常常还是会遇到稍微特殊的需求，比如上图的双色折线图。

核心思路：画两个折线图data分别为 data: [10, 20, 26, "-", "-", "-", "-"],data: ["-", "-", 26, 30, 23, 10, 5]，没有数值的点，自然就没有折线，最后拼出来一条两边双色的折线图了。

完整option如下：

	let contrast_chartOption = {
	    tooltip: {
	        show: false,
	        trigger: 'axis'
	    },
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['-50%', '-25%', '0%', '25%', '50%', '75%', '收益率'],
	        axisLine: {	
	            show: false,
	            lineStyle: {
	                color: "#999"
	            }
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	            interval:0,
	            show: true,
	            textStyle: {
	                fontSize: 24,
	                color: "#b2b2b2",
	                align: "center"
	            }
	        },
	        splitLine: {
	            show: true,
	            lineStyle: {
	            	width: 1,
	            	color: "#f1f1f1"
	            }
	        }	        
	    },
	    yAxis: {
	        type: 'value',
	        axisLine: {
	            show: false
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	            show: false,
	            textStyle: {
	                color: "#fff",
	                align: "left"
	            }
	        },
	        splitLine: {
	            show: false
	        }
	    },
	    series: [
	        {
	            name: '收益率',
	            type: 'line',
	            smooth:true,
	            symbol: 'none',
	            lineStyle:{
	            	normal: {
	            		width: 5,
	            		color: '#9991fa'
	            	}
	            },
	            itemStyle:{
	                normal: {
	                    color:'#3C89ED' ,
	                    lineStyle:'#3C89ED'	
	                }
	            },
	            data: [10, 20, 26, "-", "-", "-", "-"],	            
	            markPoint : {
	                symbol: 'image://../img/my-position.png',
	                symbolSize:135,
	                symbolOffset:[0, '-20%'],
	                showDelay:0,
	                itemStyle:{
	                    normal:{
	                        label:{
	                            show: false
	                        }
	                    }
	
	                },
	                data : [
	                    {name : '最高', value :26, xAxis: 2, yAxis: 26}//通过yAxis来控制markPoint的位置
	                ]
	            },
				markArea: {
					itemStyle :{
						normal :{
							color : '#eef6fe',
							borderColor: 'red',
							borderWidth: 0,
							opacity: 0.6
						},
						emphasis :{
							color : '#eef6fe'
						}
					},
					data: [
						[{
							xAxis: '2'
						}, {
							xAxis: '3'
						}]
					]
				}
	        },{
	            name: '收益率',
	            type: 'line',
	            smooth:true,
	            symbol: 'none',	
	            lineStyle:{
	            	normal: {
	            		width: 5 ,
	            		color: '#f0952b'
	            	}
	            },	            
	            itemStyle:{
	                normal: {
	                    color:'#EB1F10' ,
	                    lineStyle:'#EB1F10'
	
	                }
	            },
	            data: ["-", "-", 26, 30, 23, 10, 5]
	        }
	    ]
	};

echarts虽然提供了很多样例，但是常常还是会遇到稍微特殊的需求，比如上图的双色折线图。