var xAxisData = [ ' 2018-01 ' , ' 2018-02 ' , ' 2018-03 ' , ' 2018-04 ' , ' 2018-05 ' , ' 2018-06 ' , ' 2018-07 ' , ' 2018-08 ' , ' 2018-09 ' , ' 2018-10 ' , ' 2018-11 ' , ' 2018-12 ' ]; var legendData = [ 'Complaint volume ' , ' resolution volume ' , ' complaint resolution rate ' ]; var title = " Multi-horizontal line chart " ; var serieData = []; var metaDate = [ [120, 140, 100, 120, 300, 230, 130, 170,140, 120, 300, 230], [200, 120, 300, 200, 170, 300, 200, 180,200, 190, 300, 200], [100,200, 140, 300, 200, 180, 100, 300, 230, 130, 100 ,300,] ] for ( var v = 0 ; v <legendData.length; v ++ ) { var series = { name:legendData[v], type: 'line', symbol:"circle", symbolSize:10, date: metaDate [v] }; seriesData.push (series) } var colors = ["#036BC8","#4A95FF","#5EBEFC","#2EF7F3","#FFFFFF"]; var option = { backgroundColor: '#0f375f', title : {text: title,textAlign:'left',textStyle:{color:"#fff",fontSize:"16",fontWeight:"normal"}}, legend: { show:true,left:"right",data:legendData,y:"5%", itemWidth:18,itemHeight:12,textStyle:{color:"#fff",fontSize:14}, }, color:colors, grid: {left: '2%',top:"12%",bottom: "5%",right:"5%",containLabel: true}, tooltip : { trigger: 'axis',axisPointer : { type : 'shadow'}}, xAxis: [ { type: 'category', axisLine: { show: true,lineStyle:{ color:'#6173A3' }}, axisLabel:{interval:0,textStyle:{color:'#9ea7c4',fontSize:14} }, axisTick : {show: false}, date: xAxisDate, }, ], yAxis: [ { axisTick : {show: false}, splitLine: {show:false}, axisLabel:{textStyle:{color:'#9ea7c4',fontSize:14} }, axisLine: { show: true,lineStyle:{ color:'#6173A3'}}, }, ], series: seriesData };