echart折线图 -- 每条线分别对应不同x、y轴数据

代码示例

option = {
    legend: {
        data:['曲线1', '曲线2']
    },
   tooltip : {
        trigger: 'axis',
        axisPointer: {
        type: 'cross',
        animation: false,
        }
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
              //  yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            //magicType: {type: ['line']},
            restore: {},
            saveAsImage: {}
        }
    },
    grid: {
        top: 70,
        bottom: 50
    },
     xAxis: {
        type: 'value',
        name:'宽度（mm)',
        nameTextStyle:{
        color:'#333'
        },
        scale:true
    },
    yAxis:{
        name:'高度（mm）',
        type: 'value',
        nameTextStyle:{
            color:'#333'
        }
    },
    series: [{
        name:'曲线1',
        symbolSize: 5,
        data: [
            [0.99, 4],
            [1.1, 9],
            [1.21, 18],
            [1.32, 40],
            [1.53, 71],
            [1.74, 88], 
            [1.85, 55],
            [1.96, 32],
            [2.07, 9],
            [2.38, 0.2]
        ],
        type: 'line',
        smooth:true,
        showSymbol: false,
       // barGap: 0
    },
    {
        name:'曲线2',
        symbolSize: 5,
        data: [
            [0.98, 1],
            [1.3, 6],
            [1.41, 27],
            [1.62, 45],
            [1.73, 77],
            [1.84, 85],
            [2.05, 47],
            [2.16, 18],
            [2.37, 6],
            [2.38, 0.2]
        ],
        type: 'line',
        smooth:true,
        showSymbol:false,
        barGap: 0
    }
    ]
};

图例

个人理解
通常的折线图横轴默认为类目型’category’，纵轴默认为数值型’value’，这时如果数据中代表横坐标轴的值不一样的话，会产生一个错误的图表，如下图

那是因为echart默认把横坐标当做类别展示（如横坐标所示，它会把所有不同的横坐标都展示出来），当我们需要以数据增长展示时，需要把category（类目）改为value（数值），如果显示视图比较小时，可以在横坐标加scale属性。放大视图到数据区间。