在 ECharts.js 中处理许多数据点

Question

我需要帮助来改善图表线上显示的点数。使用当前代码，对于 100000 个点，仅在图形中绘制了 20 个点。

var elements = new Array(100000);

for (i = 0; i < elements.length; i++) {
    elements[i] = i;
}

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: 'ECharts entry example'
    },
    tooltip: {},
    legend: {
        data:['Sales']
    },
    xAxis: {
        data: elements
    },
    yAxis: {},
    series: [{
        name: 'Sales',
        type: 'line',
        data: elements
    }]
};
myChart.setOption(option);

Answer 1

您必须为此修改 xAxis。您应该查看axisTicks，并使用该interval选项。它支持auto、数字或函数。

或者，您也可以通过告诉数据元素显示数据点来手动显示/隐藏数据点，但这可能仅在存在可用轴刻度时才有效。

要显示每个数据点，请showAllSymbol在系列数据中设置为 true。

series: [{
    name: 'Sales',
    type: 'line',
    showAllSymbol: true,
    data: elements
}]

但是，20.000 个数据点可能很多，因此您还可以通过showSymbol在数据元素内设置来创建间隔

for(i = 0; i < elements.length; i++){
    elements[i] = {
        value: i,
        symbol: (i % 100 === 0) ? 'circle' : 'none'
    }
}

showSymbol每第 100 次迭代都会设置为 true。您可能必须将其与showAllSymbol: true系列数据结合起来才能正常工作。

注：%是模运算符