使用echarts查看最近几场考试的排名变化折线图

使用echarts前需要先引用echarts
echarts快速上手

option = {
    xAxis: {
        type: 'category',
        data: ['月考一', '月考二', '月考三', '月考四', '月考五', '月考六'],
        position:'bottom',//坐标轴的位置
        name:"考试名称",
        nameLocation:'end',
        nameTextStyle:{
            color:'#333333'
        },
        axisTick:{
            show:false
        },
        axisLabel: {
           show: true,
            textStyle: {
              color: '#333333',  //更改坐标轴文字颜色
              fontSize : 14      //更改坐标轴文字大小
            },
            interval:0,
            rotate:10
     },
         axisLine:{
             lineStyle:{
                color:'#CCCCCC' //更改坐标轴颜色
             }
      }
       
    },
    yAxis: {
        type: 'value',
        inverse:true,
        name:"名次",
        nameLocation:'start',
        nameTextStyle:{
            color:'#333333'
        },
        scale:true,//y轴开口向下
        min:1,//y轴最小值
          axisTick:{
            show:false
        },
        axisLabel: {
           show: true,
            textStyle: {
              color: '#333333',  //更改坐标轴文字颜色
              fontSize : 14      //更改坐标轴文字大小
            }
     },
         axisLine:{
             lineStyle:{
                color:'#CCCCCC' //更改坐标轴颜色
             }
      }
    },
    series: [{
        data: [ 4 ,5, 8, 12, 3, 6],
        type: 'line',
        //设置平均名称标线
        // markLine:{
        //     data:[
        //         {type: 'average', name: '平均值'},
        //         ],
        //         symbol:'none',//去掉箭头
        //         label:{
                    
        //         },
        //         lineStyle: {
        //           normal: {
        //             type: 'solid',
        //             color: '#333333',
        //           },
        //     },
        // }
    }]
};