Echarts折线图堆叠取mysql后台数据库实例

1、这里主要解决的问题就是通过php代码取mysql中的数据。
2、ajax取出每条折线使用使用的数据。
后台数据:
#RecordsArray为自定义函数，可将sql语句转化为了二维数组









$sql="select kd_name,kd_nums,kd_date from t_kd where kd_name='顺风'";
$sf=RecordsArray($sql);
$sql="select kd_name,kd_nums,kd_date from t_kd where kd_name='邮政'";
$yz=RecordsArray($sql);
$sql="select kd_name,kd_nums,kd_date from t_kd where kd_name='圆通'";
$yt=RecordsArray($sql);
$sql="select kd_name,kd_nums,kd_date from t_kd where kd_name='中通'";
$zt=RecordsArray($sql);
#将所有数据组合成一个新数组
$data=array('sf'=>$sf,'yz'=>$yz,'yt'=>$yt,'zt'=>$zt);
#输出json为ajax调用
echo json_encode($data,JSON_UNESCAPED_UNICODE);
下面是javascript代码
javascript代码
< script type = "text/javascript" >
function loadData(option) {
    $.ajax({
        type: 'post',
        //传输类型  
        async: false,
        //同步执行  
        url: '/t/data.php',
        //web.xml中注册的Servlet的url-pattern  
        data: {},
        dataType: 'json',
        //返回数据形式为json  
        success: function(result) {
            if (result) {
                option.series[0].data = [];
                option.series[1].data = [];
                option.series[2].data = [];
                option.series[3].data = [];
                $.each(result,
                function(index, values) {
                    if (index == "sf") {
                        $.each(values,
                        function(index, nvalues) {
                            option.series[0].data.push(nvalues["kd_nums"]);
                        })
                        //console.log(values["kd_name"]);						   
                    }
                    if (index == "yz") {
                        $.each(values,
                        function(index, nvalues) {
                            option.series[1].data.push(nvalues["kd_nums"]);
                        })
                    }
                    if (index == "yt") {
                        $.each(values,
                        function(index, nvalues) {
                            option.series[2].data.push(nvalues["kd_nums"]);
                        })
                    }
                    if (index == "zt") {
                        $.each(values,
                        function(index, nvalues) {
                            option.series[3].data.push(nvalues["kd_nums"]);
                        })
                    }
                })
            }
        },
        error: function(errorMsg) {
            alert("加载数据失败");
        }
    }); //AJAX 			
}

//初使化图形
var myChart = echarts.init(document.getElementById('myDiv'));
option = {
    color: ['#ff3d3d', '#00a0e9', '#f603ff', '#00b419', '#5f52a0'],
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        x: 'left',
        padding: [10, 20, 0, 20],
        data: ['顺丰', '邮政', '圆通', '中通', '天天'],
        selected: {
            '顺丰': true,
            '邮政': true,
            '圆通': true,
            '中通': true,
            '天天': false
        }
    },
    grid: {
        left: '0',
        right: '3%',
        bottom: '3%',
        top: '13%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        splitLine: { //网格线
            show: true,
            lineStyle: {
                color: ['#b1b1b1'],
                type: 'dashed'
            }
        },
        data: ['3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7', '3.8', '3.9', '3.10', '3.11', '3.12']
    },
    yAxis: {
        splitLine: { //网格线
            show: true,
            lineStyle: {
                color: ['#b1b1b1'],
                type: 'dashed'
            }
        }
    },
    series: [{
        name: '顺丰',
        type: 'line',
        data: [],
        label: {
            normal: {
                show: true,
                position: 'top' //值显示
            }
        }
    },
    {
        name: '邮政',
        type: 'line',
        data: [],
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        }
    },
    {
        name: '圆通',
        type: 'line',
        data: [],
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        }
    },
    {
        name: '中通',
        type: 'line',
        data: [],
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        }
    },
    {
        name: '天天',
        type: 'line',

        label: {
            normal: {
                show: true,
                position: 'top'
            }
        }
    }]
};

//加载数据到图像option中  
loadData(option);
//设置option,生成图像
if (option && typeof option === "object") {
    myChart.setOption(option, true);
} 
< /script>