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 效果