reactjs - 'Echarts' 不能同时指定 X 轴和 Y 轴作为类型：值

Question

我使用 Apache Echarts 并且使用 type: 'value' 在 X 轴的情况下工作时遇到问题。

我的代码： 你可以在这里试试

option = {
xAxis: {
    type: 'value',
    data: [1.12, 2.19, 3.84, 3.47, 5.75, 6.76, 9.141],
},
yAxis: {
    type: 'value'
},
series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
}]

};

根据 API 的文档，

x轴。类型

'category' 类别轴，适用于离散类别数据。

'value' 数值轴，适用于连续数据。

当我使用“类别”作为类型时：对于 x 轴，它给了我预期的曲线，但 x 轴的间距不均匀。

但是我必须绘制来自传感器的大约 10,000 个连续数据点，就像 x 轴的数据一样。API 建议对此类数据使用 xAxis.type: 'value'。当我设置 xAxis.type: 'value' 时，渲染看起来像这样。

如果有人可以帮助我并告诉我哪里出了问题或者这是否是一个实际的错误，那就太好了。

Answer 1

When both the axis types are value, the data should be in the following format so that the x and y values are mapped properly.

data = [
        [1.12,820],
        [2.19, 932],
        [3.84, 901], //xaxis value is not in order
        [3.47,934], //xaxis value is not in order
        [5.75,1290],
        [6.76,1330], 
        [9.141,1320]
    ];

If the axis values are not in order, you can sort them to display accordingly.

//sort data by xaxis values to plot the values in order
data.sort(function(a, b){return a[0] - b[0]}) 

Then set the data to the chart

option = {
        xAxis: {
            type: 'value',
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: data,
            type: 'line'
        }]
    };