echarts双折线图

引用

//反应时长 durationCharts
categoryCommonChart(studyBehavior.durationCharts, 'durationCharts') 

function categoryCommonChart(odata, dom){
    var myChart = echarts.init(document.getElementById(dom));
	let oarr = []
	oarr = odata.series.map(function(item){
		let color = item.name == '个人平均' ? '#00bdff' : '#4cf100'
		return {
			name: item.name,
		    type: 'line',
	      	data: item.data,	
	      	lineStyle: {
	            color: color //折线颜色
	        },
	        itemStyle: {
	            color: color //节点颜色
	        }
		}
	})
	option = {
		tooltip: {
	    	trigger: 'axis'
	  	},
	  	grid: {
	  		top: '30',
	    	left: '15',
	    	right: '20',
	    	bottom: '30',
	    	containLabel: true
	  	},
	  	legend: {
          	itemWidth:15,  
          	itemHeight:15,  
          	data: odata.legendData,
          	icon: 'roundRect',
          	itemHeight: 8,
          	textStyle: { //图例文字的样式
                color: '#999',
                fontSize: 12
            },
            left: 'center',
            bottom: 'bottom',
      	},
		title: {
		    text: '均次时长',
		    left: '20',
		    textStyle:{
		    	color: '#999',
		    	fontSize: 12,
		    	fontWeight: 400
		   	},			   	
		},
		grid: {
	  		top: '30',
	    	left: '15',
	    	right: '20',
	    	bottom: '30',
	    	containLabel: true
	  	},
	  	xAxis: {
	    	type: 'category',
	    	data: odata.xData,
	    	nameTextStyle: {
                color: '#666', //y轴名称颜色
                fontSize: 10 //y轴名称字体大小
            },
            axisLabel: {
                color: '#666', //x轴刻度标签颜色
            },
            axisTick: {
                show: false //不显示刻度线
            },
            axisLine: {
                lineStyle: {
                    color: '#999',
                    width: 1, //这里是为了突出显示加上的  
                },
                symbol: ['none', 'arrow'],    //只在末端显示箭头
                symbolSize: [6, 10],//原来是[8, 16]
                symbolOffset:[0, 8],//箭头段移动8个像素
            },
	  	},
	  	yAxis: {
	    	type: 'value',		    	
	    	nameTextStyle: {
                color: '#666', //y轴名称颜色
                fontSize: 10 //y轴名称字体大小
            },
            axisLabel: {
                color: '#666', //x轴刻度标签颜色
                formatter: '{value}s' //加上单位's'
            },
            axisTick: {
                show: false //不显示刻度线
            },
            splitLine: {
                //网格线
                lineStyle: {
                  type: "dotted", //设置网格线类型 dotted：虚线   solid:实线
                },
                show: true, //隐藏或显示
            },
            axisLine: {
                lineStyle: {
                  color: '#999',
                  width: 1
                },                    
                symbol: ['none', 'arrow'],
                symbolOffset: 10,
                symbolSize: [6, 10]//原来是[8, 16]
            },                
	  	},
	  	series: oarr
	};
	myChart.setOption(option, true);
}

data

         "durationCharts":{
                "legendData":[
                    "个人平均",
                    "班级平均"
                ],
                "type":"line",
                "xData":[
                    "第1题",
                    "第2题",
                    "第3题"
                ],
                "series":[
                    {
                        "name":"个人平均",
                        "type":"line",
                        "data":[
                            23,
                            4,
                            7
                        ]
                    },
                    {
                        "name":"班级平均",
                        "type":"line",
                        "data":[
                            31,
                            10,
                            11
                        ]
                    }
                ]
            },
            "participationRate":66.7
        },