echarts 多组折线图

1 需求

根据数据判断画几个折线图。

在一个折线图中画出多组数据。

2 代码

//颜色  红，橙，淡红...
var colorList = ['#ff0000','#fe8104','#fe4365','#F4CB29','#4B7CF3','#12e78c'];
 
//多个方案  几个方案代表画几个折线图
if(data.length > 1){
    $.each(data,function (i,item) {
        //达成度组合数据
        var achieves_data =[]
        var achieves_color = []
        var achieves_grade_name = []
        var plan_name = '';
        //课程目标数组
        let courseObjs = []
        var singleGrade = data[i].singlegrade;
        //单个年级
        if(singleGrade == 1){
            //达成度数组
            var achieves = [];
            $.each(item.datas, function (j, item1) {
                if(j == 0){
                    grade_name = item1.applicable_grade;
                    plan_name = item1.plan_name;
                }
                courseObjs.push(item1.number_)
                achieves.push((item1.objachieve * 100).toFixed(1))
            });
            achieves_grade_name.push(grade_name)
            //设置折线图的拐点值显示，并且加上单位。
            var ach_label = {
                show: true,
                position: 'top',//数值显示位置
                textStyle:{
                    //数值样式
                    color:colorList[0],//数值颜色
                    fontSize:12
                },
                //添加单位
                formatter: function (params) {
                    return (params.value)+"%"
                }
            }
            //设置添加数据的样式，把所有的数据放在一起
            achieves_data.push({name: grade_name,data: achieves,type:'line',label: ach_label,itemStyle: 		 {
                    normal:{lineStyle:{
                            color:colorList[0]//线条颜色
                        }}
                }});
            achieves_color.push(colorList[0])
 
        }else if(singleGrade == 0){
            //多个年级
            $.each(item.datas, function (j, item1) {
                var grade_name = item1[0].applicable_grade;
                plan_name = item1[0].plan_name;
                var achieves = []
                $.each(item1, function (k, item2) {
                    if(j == 0){
                        courseObjs.push(item2.number_)
                    }
                    achieves.push((item2.objachieve * 100).toFixed(1));
                });
                achieves_grade_name.push(grade_name)
                var ach_label = {
                    show: true,
                    position: 'top',
                    textStyle:{
                        //数值样式
                        color:colorList[j],
                        fontSize:12
                    },
                    //添加单位
                    formatter: function (params) {
                        return (params.value)+"%"
                    }
                }
                achieves_data.push({name: grade_name,data: achieves,type:'line',label:ach_label,itemStyle: {
                        normal:{lineStyle:{
                                color:colorList[j]
                            }}
                    }});
                achieves_color.push(colorList[j])
            });
        }
 
        /*<div id="right" style="float:left;width: 40% ;height: 400px">
		</div>*/
        
        var pDiv = $('#right');  
        var childdiv = $('<div style="height: 80%;width: 100%;"></div>');        //创建一个子div
        childdiv.attr('id', 'hello'+i);            //给子div设置id
        childdiv.addClass('childdiv');    //添加css样式
        childdiv.appendTo(pDiv);        //将子div添加到父div中
 
        //选中折线图区域
        var myChart = echarts.init(document.getElementById('hello'+i));
        var myOption = {
            //设置坐标轴距离画布的长度
            grid:{
                left: '40',
                right: '80',
                bottom: '30',
                containLabel:true
            },
            //标题
            title:{
                text: plan_name+'-'+course_name,
                top:'bottom',
                left:'center',
                textStyle:{
                    fontSize: 12,
                    fontWeight: 600,
                    color: '#333'
                },
            },
            //上方legend提示的颜色
            color: achieves_color,
            legend: {
                data: achieves_grade_name
            },
            xAxis:{
                type:'category',
                data:courseObjs,
                name:'课程目标',
                nameTextStyle:{
                    fontWeight:600,
                    fontSize:14
                },
                //x轴数据过多,隔行显示
                axisLabel: {
                    interval: 0,
                },
            },
            yAxis:{
                type:'value',
                name:'课程目标达成度(%)',
                nameTextStyle:{
                    fontWeight:600,
                    fontSize:14
                },
                //y轴刻度加上单位
                axisLabel: {
                    formatter:'{value} %'
                },
                min:0,//最值
                max:100
            },
            tooltip:{
                trigger:'axis',
                //提示信息加上单位
                formatter:function (params) {
                    var relVal = params[0].name//x轴对应的名字
                    for (var i = 0,l = params.length; i<l;i++){    //legend对应的名字
                        relVal += '<br/>' + params[i].marker + params[i].seriesName +': '+ 			                                                                        params[i].value +'(%)'
                    }
                    return relVal
                }
            },
            series: achieves_data
 
        }
        myChart.setOption(myOption);
 
    })
}

3 效果