Thanks, Yi.
What kind of parameters/options do you use for configuring the chart
otherwise? i want to remove anything "fancy" such as tooltip or pretty
drawing or anything else that could slow the rendering down.
-- Per
On Sun, Nov 7, 2021 at 6:43 PM Yi Shen <shenyi....@gmail.com> wrote:
> Hi,
> Store data in a static TypedArray may reduce the memory pressure and
> improve the performance significantly.
>
> For example:
>
> const data = new Float32Array(1e6 * 2);
> for (let i = 0; i < 1e6; i++) {
> data[i * 2] = x
> data[i * 2 + 1] = y
> }
>
> option = {
> series: [{
> type: 'line',
> data: data,
> dimensions: ['foo', 'bar'],
> encode: { x: 'foo', y: 'bar' }
> }]
> }
>
> Notice *dimensions* and *encode* properties should be given. It
> determines what shape your data is and how it supposed to be encoded to
> visual dimensions.
>
> We've tested, updating data using TypedArray can be realtime (about 30ms
> each frame) even the data amount scales up to 1 million. Of course to
> achieve this kind of performance, the basic requirement is you can't
> allocate a 1 million dynamic array in the other places.
>
> Regards.
>
> On Sat, Nov 6, 2021 at 12:41 AM Per Franck <per.fra...@gmail.com> wrote:
>
>> hello, i'm trying to produce the most optimized rendering of echarts
>> possible. my dataset will be 32k, 65k, 128k datapoints and refreshed
>> continuously as fast as the server can provide (at the moment ~10ms). I've
>> plunked around with echarts and I'm getting a render time of 32k
>> datapoints
>> (myChart.setOption({series: [{data: g_dataset}]});) of a fairly
>> respectable
>> 50-90 ms on a 1200x400 px using canvas renderer in chrome, 90-140ms in
>> Firefox, 70-110ms in edge.
>>
>> my initial options are as follows, based on the dynamic data example.
>>
>>
>> option = {
>> animation: false,
>> title: {
>> text: 'Dynamic Data & Time Axis'
>> },
>> dataZoom: [
>> {
>> id: 'dataZoomX',
>> type: 'slider',
>> xAxisIndex: [0],
>> filterMode: 'filter'
>> },
>> {
>> id: 'dataZoomY',
>> type: 'slider',
>> yAxisIndex: [0],
>> filterMode: 'empty'
>> }
>> ],
>> grid:{
>> show:true,
>> tooltip:{show:false}
>> },
>> xAxis: {
>> type: "value",
>> splitLine: {
>> show: false
>> }
>> },
>> yAxis: {
>> type: 'value',
>> boundaryGap: [0, '100%'],
>> splitLine: {
>> show: false
>> }
>> },
>> series: [
>> {
>> name: 'Fake Data',
>> type: 'line',
>> showSymbol: false,
>> data: g_dataset
>> }
>> ]
>> };
>>
>> any thoughts on what knobs to tweak to further improve rendering times
>> using echarts?
>>
>
>
> --
> Yi Shen
> Apache ECharts PMC
>
