echart入門多座標系

xAxis:[
      {
            gridIndex: 0,
            show:false,
            type: 'category',
            boundaryGap: false,
            data:[]
      },
      {
            gridIndex: 0,
            show:false,
            type: 'category',
            boundaryGap: false,
            data:[]
      },
      {
            gridIndex: 0,
            show:false,
            type: 'category',
            boundaryGap: false,
            data:[]
      }  .......
]
 grid: [
       {//1.千米標
            left: 0,
            right: 0,
            top: 9,
            height: 1,
        },
        {//2.電源、A機、B機、上下行、絕緣節
            left: 0,
            right: 0,
            top: 10,
            height: 90,
        },{//3.燈位
            left: 0,
            right: 0,
            top: 100,
            height: 90
        },{//4.電壓
            left: 0,
            right: 0,
            top:190,
            height: 170
        },{//5.速度
            left: 0,
            right: 0,
            top: 360,
            height: 150
        },{//6.50HZ
            left: 0,
            right: 0,
            top: 510,
            height: 150
        }, ..............
    ],
yAxis:[
    {
           gridIndex: 0,
            type: 'value',
            scale: true,
            boundaryGap:false,
    },
    {
             gridIndex: 1,
            type: 'value',
            scale: true,
            boundaryGap:false,
    }.........
]
series:[
      {
             type: 'line',
             name:"千米標",
             xAxisIndex: 0,
             yAxisIndex: 0,
             symbolSize: 10,
             symbol:null,
             hoverAnimation: false, //是否開啓 hover 在拐點標誌上的提示動畫效果
             connectNulls: true, //是否鏈接空數據
             data: [],
             lineStyle:{
                 width:0.5,
                //  color:'rgb(0,255,0)',   
             }
         },
..............
]
複製代碼

基本重要的就是xAxisIndex,yAxisIndex,gridIndex

xAxis 和yAxis數組中有幾個就是有幾個座標系,當前一個座標系中有多個線,這就是series的做用了,還有什麼不懂得能夠留言!

相關文章
相關標籤/搜索