echart 多x轴 option设置

不同x轴的曲线也可以在一个图表中显示，可以直接在echart的实例中，将option替换如下

option = {
    legend: {
        data:['温度', '湿度']
    },
   tooltip : {
        trigger: 'axis',
        axisPointer: {
        type: 'cross',
        animation: false,
        }
    },
     xAxis: {
        type: 'category',
        name:'X',
        boundaryGap: true,
        //需要将x轴上所有的点都描出来
        data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
    },
    yAxis:{
        name:'Y',
        type: 'value',
        nameTextStyle:{
            color:'#333'
        }
    },
    series: [{
        name:'温度',
        symbolSize: 5,
        //关键，需要把data的格式设置为[x,y]来和x，y轴对应
        data: [
            [1, 2],
            [3, 4],
            [5, 9],
            [7, 14],
            [9, 22],
            [11, 20],
            [13, 4],
            [15, 8],
            [17, 2],
            [19, 1]
        ],
        type: 'line',
        smooth:true,
        showSymbol: false,
        barGap: 0
    },
    {
        name:'湿度',
        symbolSize: 5,
        data: [
            [2, 1],
            [4, 4],
            [6, 9],
            [8, 10],
            [10, 14],
            [12, 16],
            [14, 10],
            [16, 8],
            [18, 5],
            [20, 0]
        ],
        type: 'line',
        smooth:true,
        showSymbol:false,
        // barGap: 0
    }
    ]
};
复制代码

效果图如下

参考文档：echarts.baidu.com/option.html…

转载于:https://juejin.im/post/5c10d573e51d451d9e1d37fc