Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Performance echarts - High JS and CPU usage

See original GitHub issue

Version

4.9.0

Steps to reproduce

Hi,

I’m using echarts on my project and I analyse CPU and JS usage with Chrome Dev Tools. I see a high usage on updateAndAddDisplayable process (20.48%). Also, I see high zrender usage (zrender version: “4.3.2”).

Capture image resource-monitoring



let options: EChartOption = {
  grid: {
	bottom: 155,
	// Calculate offset to display custom yaxis element
	left: offsetL,
	right: offsetR
  },
  dataZoom: [
	  {
		type: 'slider',
		show: true,
		realtime: false,
		start: this.graphicSettingStore.zoomStart,
		end: this.graphicSettingStore.zoomEnd,
		bottom: 50,
		handleIcon: 'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
		handleSize: '100%',
		showDetail: false
	  }
	],
  tooltip: {
	show: true,
	showDelay: 30,
	renderMode: 'html',
	triggerOn: 'click',
	formatter: function (params: any, ticket: any, callback: any) {
	  let res = '';
	  if (params != null && params.length > 0) {
		res  = '<ul>';
		res = params[0].axisValueLabel;
		for (let param of params) {
		  if (param.seriesName !== 'a') {
			res  =
			  '<br/><span style="color:'  
			  param.color  
			  '">&#9679;</span>&nbsp;&nbsp;';
			res  =
			  '<span style="color:white;">'  
			  param.seriesName  
			  ':&nbsp;'  
			  param.data[1]  
			  '</span>';
		  }
		}
		res  = '</ul>';
	  }
	  callback(ticket, res);
	  return res;
	},
  },

  toolbox: {
	show: true,
	showTitle: true,
	itemSize: 30,
	feature: {
	  dataZoom: {
		yAxisIndex: 'none',
		title: {
		  zoom: 'Zoom',
		  back: 'Back'
		},
	  },
	  restore: {
		title: 'Restore'
	  },
	},
  },
  xAxis: [
	{
	  type: 'time',
	  axisPointer: {
		show: true,
		handle: {
		  show: true,
		  color: '#a9b7ca',
		},
		label: {
		  show: false,
		  formatter: function (params: any) {
			return Utils.formateDate2(new Date(params.value));
		  },
		},
	  },
	  boundaryGap: false,
	  axisLine: { onZero: false },
	  axisLabel: {
		formatter: function (value: any) {
		  return Utils.formateDate2(new Date(value));
		},
	  },
	},
  ],
  // Array custom yaxis element
  yAxis: yAxis,
  // Array of series (30 series)
  series: series,
};

What is expected?

High performance.

What is actually happening?

Slow performance. All computer is working slowly and it has a lot of echarts objects

Issue Analytics

State:
Created 2 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

1reaction

pissangcommented, Jun 8, 2021

Are you updating the options frequently?

0reactions

JESUMHcommented, Jul 1, 2021

Hi @pissang,

I have updated all project to the last Angular version. Also, I have updated echarts library and zrender. Application performance has been improved but it is still high (1-1.5GB).

"echarts": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.2.tgz", "integrity": "sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==", "requires": { "tslib": "2.0.3", "zrender": "5.1.1" }, "dependencies": { "tslib": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" } } },