在 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、数字或函数。

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

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

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'
    }
}

这将在每 100 次迭代时将 showSymbol 设置为 true。您可能必须将其与系列数据中的 showAllSymbol: true 结合使用才能正常工作。

注：%是modulus operator

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

Working with many data points in ECharts.js

javascript

charts

echarts