symbol draw will cause performance drop significantly. So don't forget to
disable it:
{
showSymbol: false
}
And remove dataZoom if you don't need it. It will process the data and drop
the performance a bit.
Other components like tooltips won't affect the performance. But if you
don't like it, you can just remove the whole property about this component
from the option.
Regards.
On Tue, Nov 9, 2021 at 12:53 AM Per Franck <per.fra...@gmail.com> wrote:
> 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
>>
>
--
Yi Shen
Apache ECharts PMC
