I need help to improve the number of points displayed on the chart line. With the current code, for 100000 points, only 20 drawn in the graph line.

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);

I need help to improve the number of points displayed on the chart line. With the current code, for 100000 points, only 20 drawn in the graph line.

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);

• javascript
• charts
• echarts

Share Improve this question Follow edited Jan 24, 2018 at 14:02 Jeffrey Roosendaal 7,15788 gold badges4343 silver badges5858 bronze badges asked Jan 22, 2018 at 5:13 Sávio RairesSávio Raires 15922 gold badges55 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You have to modify the xAxis for this. You should take a look at the axisTicks, and play around with the interval option. It either supports auto, a number or a function.

---

Alternatively, you can also manually show/hide the datapoints, by telling the data elements to display them, but maybe this only works when there's an axis tick available.

For displaying every datapoint, set showAllSymbol to true in the series data.

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

However, 20.000 datapoints may be a lot, so you can also create an interval by setting showSymbol within the data elements

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

This will set showSymbol to true for every 100th iteration. You may have to bine this with showAllSymbol: true in the series data to work properly.

Note: % is the modulus operator