echarts通过ajax加载数据渲染图表（折线图）

折线图

官网示例

官网示例链接

后台返回数据类型

实现echarts效果要求的数据类型

代码部分

分析：X轴月数据
Y轴申请数量
填充数据为—每个月中产品变化趋势
难点： 如果该产品在某月没有对应数量变化，需将数值赋为0
HTML

 <div class="applicationNumberTrendAnalysis">
      <div class="antaTitle">License申请数量趋势分析</div>
      <div class="antaCenter" id="lineMain"></div>
 </div>

JS

 var myChart0 = echarts.init(document.getElementById('lineMain'));
        myChart0.setOption({
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show : false,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                min:0
            },
            series: [

            ]
        })

        /**licence申请數量趋势分析 ajax S */
        myChart0.showLoading();    //数据加载完之前先显示一段简单的loading动画
        $.ajax({
            url: $treeBasePath+"/count/queryApplyProductByMonth",
            data: {},
            datatype: "json",
            type: "post",
            async: false,
            success: function (result) {
                console.log("首页licence申请數量趋势分析=",result);
                if(result.STATUS=="success") {
                    var applyProductNum=[] //用来存放申请的产品名称
                    var xapplyMonth=[]  //用来存放x轴 时间
                    var applyProTempo;//临时存储数据结构
                    var applyColorData=['#d7cb60','#6ca7e3','#7ccaaf','#dd8cb1','#ec9380','#c48ce4']
                    var applyNumAnalysisRes=result.RESULT.list;
                    if(applyNumAnalysisRes.length>0){
                        $.each(applyNumAnalysisRes,function(index,applyNumAnalysisResEle){
                            if(applyProductNum.indexOf(applyNumAnalysisResEle.productname)==-1){
                                applyProductNum.push(applyNumAnalysisResEle.productname);
                            }
                            if(xapplyMonth.indexOf(applyNumAnalysisResEle.months)==-1){
                                xapplyMonth.push(applyNumAnalysisResEle.months)
                            }
                        })
                        console.log("xapplyMonth===",xapplyMonth);
                        //循环所有数据，判断每条数据所属时间
                        var applyJson={}
                        $.each(applyProductNum,function (index,applyOneProduct) {
                            applyJson[applyOneProduct] = [];
                            $.each(applyNumAnalysisRes,function (index,applyOneElement) {
                                if(applyOneProduct==applyOneElement.productname){
                                    $.each(xapplyMonth,function (index,applyOneMonth) {
                                        if (applyOneElement.months == applyOneMonth) {
                                            applyJson[applyOneProduct][index] = applyOneElement.num;
                                        }
                                    });
                                }
                            })

                        });
                        $.each(xapplyMonth,function (index,applyOneMonth) {
                            for(var k in applyJson){
                                console.log('item',applyJson[k][index]);
                                if(!applyJson[k][index]){
                                    applyJson[k][index] = 0;
                                }
                            }
                        });

                        //遍历产品名称拼接data所需数据
                        var applySeriesdata=[]
                        $.each(applyProductNum,function (index,applyOnePro) {
                            applyProTempo={
                                name:applyOnePro,
                                type:'line',
//                                stack: '总量',
                                //给data赋值
                                data:applyJson[applyOnePro]
                            }

                            applySeriesdata.push(applyProTempo)
                        })
                        console.log("applySeriesdata--",applySeriesdata);
                    }
                    myChart0.setOption({
                        color:applyColorData,
                        legend: {
                            data:applyProductNum
                        },
                        xAxis:{
                            data:xapplyMonth
                        },
                        series:applySeriesdata
                    })
                }

            }
        });
        myChart0.hideLoading();    //隐藏加载动画
        /**licence申请數量趋势分析 ajax E*/

最终展示效果

如果出现折线效果都以每个月最高值显示的情况：

解决方案：