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
