ajax实际请求数据展示echarts折线图

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//echarts等待框
  myChart.showLoading({  
        text : '正在努力的读取数据中...'
  }); 
  //向后台请求数据
$.ajax({
type:"post",
url:config+"makeStatistic.do",
async:true,
data:{
"quantity":quantity,
"operator":operator,
"number":tiNum
},
success:function(data){
//将需要的data值进行拼接之后放到option中，以变量的方式存在
var data=eval("("+data+")");
var borrow2=[];//单对单
var borrow3=[];//单对多
var brackets=[];//多对多
var carry1=[];// 单对单进位
var carry2=[];//单对多进位
var carry3=[];//多对多进位
var more2more=[];//单对多借位
var nobrackets=[];//多对多借位
var one2more=[];//有括号
var one2one=[];//无括号
var tiNumber=[];//题目数量
for(var x=data.data.length;x>0;x--){
tiNumber.push(x.toString())
}
for(var i=0;i<data.data.length;i++){
for(var y=0;y<data.data[i].length;y++){
if(data.data[i][y]==""||data.data[i][y]==null){
data.data[i][y]="0";
borrow2.push(data.data[i][0])
borrow3.push(data.data[i][1])
brackets.push(data.data[i][2])
carry1.push(data.data[i][3])
carry2.push(data.data[i][4])
carry3.push(data.data[i][5])
more2more.push(data.data[i][6])
nobrackets.push(data.data[i][7])
one2more.push(data.data[i][8])
one2one.push(data.data[i][9])
break
}
}
}
//将赋值过的数组拼接展示到图标中
  var  option = {
  //鼠标放入的提示文字及框
  tooltip: {
        trigger: 'axis'
    },
       
    //导航文字的布局方式及位置
    legend: {
    orient:'vertical',
    align:'left',
    right:'2%',
    top:'20%',
    itemHeight:'20',
        data: [{
    name: '单对单',
    textStyle: {
        color: '#000080'
    }
},{
    name: '单对多',
    textStyle: {
        color: '#008B8B'
    }
},{
    name: '多对多',
    textStyle: {
        color: '#00FF7F'
    }
},{
    name: '单对单进位',
    textStyle: {
        color: '#698B22'
    }
},{
    name: '单对多进位',
    textStyle: {
        color: '#6E7B8B'
    }
},{
    name: '多对多进位',
    textStyle: {
        color: '#8A2BE2'
    }
},{
    name: '单对多借位',
    textStyle: {
        color: '#8B2323'
    }
},{
    name: '多对多借位',
    textStyle: {
        color: '#CD6889'
    }
},{
    name: '有括号',
    textStyle: {
        color: '#CD0000'
    }
},{
    name: '无括号',
    textStyle: {
        color: '#D02090'
    }
}
        ]
    },
    //折线图展示的位置
    grid: {
        left: '3%',
        right: '20%',
        bottom: '3%',
        containLabel: true
    },
    //X轴的坐标位置
xAxis: {
        type: 'category',
        boundaryGap: false,
        data: tiNumber
    },
    //Y轴的坐标位置
    yAxis: {
        type: 'value',
        min: 0,
max: 100,
        boundaryGap: false,
        data: ["0","20","40","60","80","100"]
    },
    //每个点的位置，name需和导航name对应
    series: [
        {
            name:'单对单',
            type:'line',
            data:borrow2
        },
        {
            name:'单对多',
            type:'line',
            data:borrow3
        },
        {
            name:'多对多',
            type:'line',
            data:brackets
        },
        {
            name:'单对单进位',
            type:'line',
            data:carry1
        },
        {
            name:'单对多进位',
            type:'line',
            data:carry2
        },
        {
            name:'多对多进位',
            type:'line',
            data:carry3
        },
        {
            name:'单对多借位',
            type:'line',
            data:more2more
        },
        {
            name:'多对多借位',
            type:'line',
            data:nobrackets
        },
        {
            name:'有括号',
            type:'line',
            data:one2more
        },
        {
            name:'无括号',
            type:'line',
            data:one2one
        }
    ]
};
// // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//隐藏等待框
setTimeout(function(){myChart.hideLoading()},2000)
}

});

这是自己的一个小学游戏折线图的部分，根据自己需求去更改json结构即可。