九宫图echarts 折线配置项内容和展示

用于观测实时数据

      var timeData = ["21:00", "21:30", "22:00"];
var data1 = [783, 1919, 3099];
var data2 = [361, 722, 985];
var data3 = [414, 973, 2063];
var data4 = [674, 1194, 2295];
var data5 = [109, 227, 346];
var data6 = [555, 1038, 1308];
var data7 = [429, 690, 941];
var data8 = [398, 2299, 3504];
var data9 = [1709, 7329, 8986];
option = {
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    title: {
        text: '九宫图',
        subtext: '',
        x: 'center'
    },
    tooltip: {
        trigger: 'axis'
    },
    
    
    grid: [{show:true,
         top: '5%',
        right: '70%',
        left:'5%',
        height: '25%'
    }, {
        show:true,
       right: '40%',
        left:'35%',
        top: '5%',
        height: '25%'
    },{
        show:true,
        right: '10%',
        left:'65%',
        top: '5%',
        height: '25%'
    }, {show:true,
         top: '35%',
        right: '70%',
        left:'5%',
        height: '25%'
    }, {
        show:true,
       right: '40%',
        left:'35%',
        top: '35%',
        height: '25%'
    },{
        show:true,
        right: '10%',
        left:'65%',
        top: '35%',
        height: '25%'
    },
    {show:true,
         top: '65%',
        right: '70%',
        left:'5%',
        height: '25%'
    }, {
        show:true,
       right: '40%',
        left:'35%',
        top: '65%',
        height: '25%'
    },{
        show:true,
        right: '10%',
        left:'65%',
        top: '65%',
        height: '25%'
    }],
    xAxis : [
        {   gridIndex: 0,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData
        },
        {
            gridIndex: 1,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData,
            
        },
        {gridIndex: 2,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData
        },
        {
            gridIndex: 3,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData,
        },
        {   gridIndex: 4,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData
        },
        {
            gridIndex: 5,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData,
            
        },
        {gridIndex: 6,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData
        },
        {
            gridIndex: 7,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData,
        },
        {
            gridIndex: 8,
            type : 'category',
            boundaryGap : false,
            axisLine: {onZero: true},
            data: timeData,
        }
    ],
    yAxis : [
        {   gridIndex: 0,
            name : 'icon1',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
        },
        {
            gridIndex: 1,
            name : 'icon2',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
            
        },
         { gridIndex: 2,
            name : 'icon3',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
        
        },
        {
            gridIndex: 3,
            name : 'icon4',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
            
        },
        {   gridIndex: 4,
            name : 'icon5',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
        
        },
        {
            gridIndex: 5,
            name : 'icon6',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
            
        },
         { gridIndex: 6,
            name : 'icon7',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
        
        },
        {
            gridIndex: 7,
            name : 'icon8',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
            
        },
        {
            gridIndex: 8,
            name : 'icon9',
            type : 'value',
            nameLocation:'end',
            nameRotate:0,
            nameGap:10
            
        }
    ],
    series : [
        {
            name:'icon1',
            type:'line',
             xAxisIndex: 0,
            yAxisIndex: 0,
            symbolSize: 8,
            hoverAnimation: false,
            data:data1
        },
        {
            name:'icon2',
            type:'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: data2
        },
        {
            name:'icon3',
            type:'line',
             xAxisIndex: 2,
            yAxisIndex: 2,
            symbolSize: 8,
            hoverAnimation: false,
            data:data3
        },
        {
            name:'icon4',
            type:'line',
            xAxisIndex: 3,
            yAxisIndex: 3,
            symbolSize: 8,
            hoverAnimation: false,
            data: data4
        },
        {
            name:'icon5',
            type:'line',
             xAxisIndex: 4,
            yAxisIndex: 4,
            symbolSize: 8,
            hoverAnimation: false,
            data:data5
        },
        {
            name:'icon6',
            type:'line',
            xAxisIndex:5,
            yAxisIndex: 5,
            symbolSize: 8,
            hoverAnimation: false,
            data: data6
        },
        {
            name:'icon7',
            type:'line',
             xAxisIndex: 6,
            yAxisIndex:6,
            symbolSize: 8,
            hoverAnimation: false,
            data:data7
        },
        {
            name:'icon8',
            type:'line',
            xAxisIndex: 7,
            yAxisIndex: 7,
            symbolSize: 8,
            hoverAnimation: false,
            data: data8
        },
        {
            name:'icon9',
            type:'line',
            xAxisIndex: 8,
            yAxisIndex: 8,
            symbolSize: 8,
            hoverAnimation: false,
            data: data9
        }
    ]
};