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

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

注意： %是模数运算符