使用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结合使用才能正常工作。

注意：%是modulus operator