echarts通过变量赋值数据无法显示问题结局

​本文已参与「新人创作礼」活动，一起开启掘金创作之路。

使用内容

echarts: ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

layui:layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，常适合网页界面的快速开发。

问题描述

     通过ajax进行后台接口请求后，并将返回后的数据进行整理合并，并将整理后的数据赋值给变量，用于图形展示，但尝试过程中发现，echarts图能够渲染出来，但是图上无数据，尝试将数据值赋成固定值时，图中能够正常显示定值数据，遂初步判定为数据值。

问题原因

Ajax是异步请求，在请求反馈前echarts已经完成了渲染，所以，当渲染完成后，再对变量进行赋值已经无法生效了。

解决方法

所以我在请求返回后，再对该部分进行渲染，就能够正常的显示图标数据了。

代码示例

调整前代码（错误代码）

            radiusdata = []
			seriesdata = []
			$.ajax({
				type: "POST",
				headers: {
					token: 'adasdasdasd'
				},
				data: {APPID: appId,},
				url: config.base_server + "/serviceResourceMonitoring/getDatabaseMonitoringVal",
				dataType: "json",
				success: function(res){
					if (res.code == 'idt-core-200') {
						radiusdata = []
						seriesdata = []
						data = res.data
						for (var i=0;i<data.length;i++){
							radiusdata.push(data[i]['param'])
							seriesdata.push(Number(data[i]['val']))
						}

					}
				}
			});


			// var myChart5 = echarts.init(document.getElementById('line5'));
			var dom = document.getElementById('line5');
			var myChart5 = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});
			
			var option = {
				title: [
					{
						text: '表空间使用情况',
						x: 'center'
					}
				],
				polar: {
					radius: [30, '80%']
				},
				angleAxis: {
					max: 100,
					startAngle: 75
				},
				radiusAxis: {
					type: 'category',
					data:radiusdata 
				},
				tooltip: {},
				series: {
					type: 'bar',
					data: seriesdata ,
					coordinateSystem: 'polar',
					label: {
						show: true,
						position: 'middle',
						formatter: '{b}: {c}'
					}
				}
			};

调整后（正确代码）

radiusdata = []
			seriesdata = []
			$.ajax({
				type: "POST",
				headers: {
					token: 'adasdasdasd'
				},
				data: {APPID: appId,},
				url: config.base_server + "/serviceResourceMonitoring/getDatabaseMonitoringVal",
				dataType: "json",
				success: function(res){
					if (res.code == 'idt-core-200') {
						radiusdata = []
						seriesdata = []
						data = res.data
						for (var i=0;i<data.length;i++){
							radiusdata.push(data[i]['param'])
							seriesdata.push(Number(data[i]['val']))
						}
						// var myChart5 = echarts.init(document.getElementById('line5'));
						var dom = document.getElementById('line5');
						var myChart5 = echarts.init(dom, null, {
							renderer: 'canvas',
							useDirtyRect: false
						});
	
						var option = {
							title: [
								{
									text: '表空间使用情况',
									x: 'center'
								}
							],
							polar: {
								radius: [30, '80%']
							},
							angleAxis: {
								max: 100,
								startAngle: 75
							},
							radiusAxis: {
								type: 'category',
								data: ["JZSOA_AUDIT", "JZSXXZX", "USERS", "IDT_MIDDLE85247", "JZSZX", "JZSOA", "JZSCOMMON" ]
							},
							tooltip: {},
							series: {
								type: 'bar',
								data: [0.32, 0.19, 0.32, 0.01, 0.12, 0.46, 0.12 ],
								coordinateSystem: 'polar',
								label: {
									show: true,
									position: 'middle',
									formatter: '{b}: {c}'
								}
							}
						};

						myChart5.setOption(option);
					}
				}
			});