You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/10/12 09:36:20 UTC

[GitHub] [echarts] robin-repo opened a new issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

robin-repo opened a new issue #15868:
URL: https://github.com/apache/echarts/issues/15868


   ### Version
   5.2
   
   ### Steps to reproduce
   动态排序柱状图柱子显示不全。有时候有,有时候没有。
   
   ### What is expected?
   动态排序柱状图柱子显示不全。有时候有,有时候没有。
   
   ### What is actually happening?
   动态排序柱状图柱子显示不全。有时候有,有时候没有。
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] robin-repo commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
robin-repo commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940863891


   到最后就不显示了


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] robin-repo commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
robin-repo commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940863472


   ```
   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8" />
   		<meta name="viewport" content="width=device-width, initial-scale=1">
   		<title></title>
   		<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js" type="text/javascript"
   			charset="utf-8"></script>
   		<style type="text/css">
   			div {
   				height: 800px;
   				width: 100%;
   			}
   		</style>
   	</head>
   	<body>
   		<div id="root"></div>
   		<script type="text/javascript">
   			var colorArray = ['#ef5b9c', '#fedcbd', '#80752c', '#2a5caa', '#46485f', '#585eaa', '#f58220', '#a3cf62', '#78a355',
   				'#77ac98', '#2570a1'
   			];
   			const data = [{
   					"settlementUnit": "客户1",
   					"createDate": "2021-12-17",
   					"productCount": 2
   				},
   				{
   					"settlementUnit": "客户1",
   					"createDate": "2021-11-17",
   					"productCount": 70
   				},
   				{
   					"settlementUnit": "客户2",
   					"createDate": "2021-09-17",
   					"productCount": 10
   				},
   				{
   					"settlementUnit": "客户3",
   					"createDate": "2021-10-17",
   					"productCount": 6
   				},
   				{
   					"settlementUnit": "客户4",
   					"createDate": "2021-09-17",
   					"productCount": 7
   				},
   				{
   					"settlementUnit": "客户51111",
   					"createDate": "2021-08-17",
   					"productCount": 4
   				},
   				{
   					"settlementUnit": "客户22211",
   					"createDate": "2021-08-17",
   					"productCount": 50
   				},
   				{
   					"settlementUnit": "客户5",
   					"createDate": "2021-06-17",
   					"productCount": 1
   				}
   			];
   
   			let myChart = echarts.init(document.getElementById("root"));
   
   			if (window.timerList) {
   				window.timerList.forEach(item => {
   					clearTimeout(item);
   				});
   			} else window.timerList = [];
   
   			const updateFrequency = 2000;
   
   			const dimension = 0;
   
   			const dates = [];
   
   			const seriesData = [];		
   
   			for (let i = 0; i < data.length; i++) {
   				if (!dates.includes(data[i].createDate)) {
   					dates.push(data[i].createDate)
   				}
   				if (data[i].createDate == data[0].createDate) {
   					const index = seriesData.findIndex(element => element[1] == data[i].settlementUnit);
   					if (index !== -1) {
   						seriesData[index][0] += data[i].productCount;
   					} else seriesData.push([data[i].productCount, data[i].settlementUnit, data[i].createDate]);
   				}
   			}
   
   			let option = {
   				grid: {
   					top: 10,
   					bottom: 30,
   					left: 150,
   					right: 80
   				},
   				xAxis: {
   					max: 'dataMax',
   					axisLabel: {
   						formatter: function(n) {
   							return n;
   						}
   					}
   				},
   				dataset: {
   					source: seriesData
   				},
   				yAxis: {
   					type: 'category',
   					inverse: true,
   					max: 10,
   					axisLabel: {
   						interval: 0,
   						show: true,
   						fontSize: 14,
   						formatter: function(value) {
   							return value;
   						},
   						rich: {
   							flag: {
   								fontSize: 25,
   								padding: 5
   							}
   						}
   					},
   					animationDuration: 300,
   					animationDurationUpdate: 300
   				},
   				series: [{
   					realtimeSort: true,
   					seriesLayoutBy: 'column',
   					type: 'bar',
   					itemStyle: {
   						color: function(param) {
   							return colorArray[Math.round(Math.random() * 10)];
   						}
   					},
   					encode: {
   						x: dimension,
   						y: 3
   					},
   					label: {
   						show: true,
   						precision: 1,
   						position: 'right',
   						valueAnimation: true,
   						fontFamily: 'monospace'
   					}
   				}],
   				// Disable init animation.
   				animationDuration: 1000,
   				animationDurationUpdate: 500,
   				animationEasing: 'linear',
   				animationEasingUpdate: 'linear',
   				graphic: {
   					elements: [{
   						type: 'text',
   						right: 160,
   						bottom: 60,
   						style: {
   							text: dates[0],
   							font: 'bolder 80px monospace',
   							fill: 'rgba(100, 100, 100, 0.25)'
   						},
   						z: 100
   					}]
   				}
   			};
   
   			myChart.setOption(option);
   
   			for (let i = 0; i < dates.length - 1; i++) {
   				(function(i) {
   					var timer = setTimeout(function() {
   						updateDate(dates[i + 1]);
   					}, (i + 1) * updateFrequency);
   
   					window.timerList.push(timer);
   				})(i);
   			}
   
   			function updateDate(currentDate) {
   				var seriesData2 = [];
   
   				let source = data.filter(function(d) {
   					return d.createDate == currentDate;
   				});
   
   				source.forEach(item => {
   					var index = seriesData2.findIndex(element => element[1] == item.settlementUnit);
   					if (index !== -1) {
   						seriesData2[index][0] += item.productCount;
   					} else seriesData2.push([item.productCount, item.settlementUnit, item.createDate]);
   				});
   				option.series[0].data = seriesData2;
   				option.graphic.elements[0].style.text = currentDate;
   				myChart.setOption(option);
   			}
   		</script>
   	</body>
   </html>
   ```


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] plainheart commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940845013


   可以正常打开啊


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] plainheart commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940846382


   是官网的例子吗?怎么复现?


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] robin-repo commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
robin-repo commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940843773


   ![image](https://user-images.githubusercontent.com/48324500/136932379-80121b71-e476-4d5d-ad27-f9ce0948b703.png)
   有数据但不显示,只有一条


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] robin-repo closed issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
robin-repo closed issue #15868:
URL: https://github.com/apache/echarts/issues/15868


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] robin-repo closed issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
robin-repo closed issue #15868:
URL: https://github.com/apache/echarts/issues/15868


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] robin-repo commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
robin-repo commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940846030


   应该要有柱子显示的,但是没有


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] plainheart edited a comment on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
plainheart edited a comment on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940878577


   数据有点缺失,每天每个客户都应该有数据项才可以。对照下官网给的数据格式。


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] echarts-bot[bot] commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940839642






-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] robin-repo removed a comment on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
robin-repo removed a comment on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940863472


   ```
   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8" />
   		<meta name="viewport" content="width=device-width, initial-scale=1">
   		<title></title>
   		<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js" type="text/javascript"
   			charset="utf-8"></script>
   		<style type="text/css">
   			div {
   				height: 800px;
   				width: 100%;
   			}
   		</style>
   	</head>
   	<body>
   		<div id="root"></div>
   		<script type="text/javascript">
   			var colorArray = ['#ef5b9c', '#fedcbd', '#80752c', '#2a5caa', '#46485f', '#585eaa', '#f58220', '#a3cf62', '#78a355',
   				'#77ac98', '#2570a1'
   			];
   			const data = [{
   					"settlementUnit": "客户1",
   					"createDate": "2021-12-17",
   					"productCount": 2
   				},
   				{
   					"settlementUnit": "客户1",
   					"createDate": "2021-11-17",
   					"productCount": 70
   				},
   				{
   					"settlementUnit": "客户2",
   					"createDate": "2021-09-17",
   					"productCount": 10
   				},
   				{
   					"settlementUnit": "客户3",
   					"createDate": "2021-10-17",
   					"productCount": 6
   				},
   				{
   					"settlementUnit": "客户4",
   					"createDate": "2021-09-17",
   					"productCount": 7
   				},
   				{
   					"settlementUnit": "客户51111",
   					"createDate": "2021-08-17",
   					"productCount": 4
   				},
   				{
   					"settlementUnit": "客户22211",
   					"createDate": "2021-08-17",
   					"productCount": 50
   				},
   				{
   					"settlementUnit": "客户5",
   					"createDate": "2021-06-17",
   					"productCount": 1
   				}
   			];
   
   			let myChart = echarts.init(document.getElementById("root"));
   
   			if (window.timerList) {
   				window.timerList.forEach(item => {
   					clearTimeout(item);
   				});
   			} else window.timerList = [];
   
   			const updateFrequency = 2000;
   
   			const dimension = 0;
   
   			const dates = [];
   
   			const seriesData = [];		
   
   			for (let i = 0; i < data.length; i++) {
   				if (!dates.includes(data[i].createDate)) {
   					dates.push(data[i].createDate)
   				}
   				if (data[i].createDate == data[0].createDate) {
   					const index = seriesData.findIndex(element => element[1] == data[i].settlementUnit);
   					if (index !== -1) {
   						seriesData[index][0] += data[i].productCount;
   					} else seriesData.push([data[i].productCount, data[i].settlementUnit, data[i].createDate]);
   				}
   			}
   
   			let option = {
   				grid: {
   					top: 10,
   					bottom: 30,
   					left: 150,
   					right: 80
   				},
   				xAxis: {
   					max: 'dataMax',
   					axisLabel: {
   						formatter: function(n) {
   							return n;
   						}
   					}
   				},
   				dataset: {
   					source: seriesData
   				},
   				yAxis: {
   					type: 'category',
   					inverse: true,
   					max: 10,
   					axisLabel: {
   						interval: 0,
   						show: true,
   						fontSize: 14,
   						formatter: function(value) {
   							return value;
   						},
   						rich: {
   							flag: {
   								fontSize: 25,
   								padding: 5
   							}
   						}
   					},
   					animationDuration: 300,
   					animationDurationUpdate: 300
   				},
   				series: [{
   					realtimeSort: true,
   					seriesLayoutBy: 'column',
   					type: 'bar',
   					itemStyle: {
   						color: function(param) {
   							return colorArray[Math.round(Math.random() * 10)];
   						}
   					},
   					encode: {
   						x: dimension,
   						y: 3
   					},
   					label: {
   						show: true,
   						precision: 1,
   						position: 'right',
   						valueAnimation: true,
   						fontFamily: 'monospace'
   					}
   				}],
   				// Disable init animation.
   				animationDuration: 1000,
   				animationDurationUpdate: 500,
   				animationEasing: 'linear',
   				animationEasingUpdate: 'linear',
   				graphic: {
   					elements: [{
   						type: 'text',
   						right: 160,
   						bottom: 60,
   						style: {
   							text: dates[0],
   							font: 'bolder 80px monospace',
   							fill: 'rgba(100, 100, 100, 0.25)'
   						},
   						z: 100
   					}]
   				}
   			};
   
   			myChart.setOption(option);
   
   			for (let i = 0; i < dates.length - 1; i++) {
   				(function(i) {
   					var timer = setTimeout(function() {
   						updateDate(dates[i + 1]);
   					}, (i + 1) * updateFrequency);
   
   					window.timerList.push(timer);
   				})(i);
   			}
   
   			function updateDate(currentDate) {
   				var seriesData2 = [];
   
   				let source = data.filter(function(d) {
   					return d.createDate == currentDate;
   				});
   
   				source.forEach(item => {
   					var index = seriesData2.findIndex(element => element[1] == item.settlementUnit);
   					if (index !== -1) {
   						seriesData2[index][0] += item.productCount;
   					} else seriesData2.push([item.productCount, item.settlementUnit, item.createDate]);
   				});
   				option.series[0].data = seriesData2;
   				option.graphic.elements[0].style.text = currentDate;
   				myChart.setOption(option);
   			}
   		</script>
   	</body>
   </html>
   ```


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] Ovilia commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940892838


   (👆上面一行的 mentioned 是手误,请勿略)


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] plainheart commented on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
plainheart commented on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940878577


   数据有点缺失,每天每个客户都应该有数据项才可以。


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] robin-repo removed a comment on issue #15868: 动态排序柱状图柱子显示不全。有时候有,有时候没有。参考:动态排序柱状图 - 人均收入

Posted by GitBox <gi...@apache.org>.
robin-repo removed a comment on issue #15868:
URL: https://github.com/apache/echarts/issues/15868#issuecomment-940863472


   ```
   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8" />
   		<meta name="viewport" content="width=device-width, initial-scale=1">
   		<title></title>
   		<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js" type="text/javascript"
   			charset="utf-8"></script>
   		<style type="text/css">
   			div {
   				height: 800px;
   				width: 100%;
   			}
   		</style>
   	</head>
   	<body>
   		<div id="root"></div>
   		<script type="text/javascript">
   			var colorArray = ['#ef5b9c', '#fedcbd', '#80752c', '#2a5caa', '#46485f', '#585eaa', '#f58220', '#a3cf62', '#78a355',
   				'#77ac98', '#2570a1'
   			];
   			const data = [{
   					"settlementUnit": "客户1",
   					"createDate": "2021-12-17",
   					"productCount": 2
   				},
   				{
   					"settlementUnit": "客户1",
   					"createDate": "2021-11-17",
   					"productCount": 70
   				},
   				{
   					"settlementUnit": "客户2",
   					"createDate": "2021-09-17",
   					"productCount": 10
   				},
   				{
   					"settlementUnit": "客户3",
   					"createDate": "2021-10-17",
   					"productCount": 6
   				},
   				{
   					"settlementUnit": "客户4",
   					"createDate": "2021-09-17",
   					"productCount": 7
   				},
   				{
   					"settlementUnit": "客户51111",
   					"createDate": "2021-08-17",
   					"productCount": 4
   				},
   				{
   					"settlementUnit": "客户22211",
   					"createDate": "2021-08-17",
   					"productCount": 50
   				},
   				{
   					"settlementUnit": "客户5",
   					"createDate": "2021-06-17",
   					"productCount": 1
   				}
   			];
   
   			let myChart = echarts.init(document.getElementById("root"));
   
   			if (window.timerList) {
   				window.timerList.forEach(item => {
   					clearTimeout(item);
   				});
   			} else window.timerList = [];
   
   			const updateFrequency = 2000;
   
   			const dimension = 0;
   
   			const dates = [];
   
   			const seriesData = [];		
   
   			for (let i = 0; i < data.length; i++) {
   				if (!dates.includes(data[i].createDate)) {
   					dates.push(data[i].createDate)
   				}
   				if (data[i].createDate == data[0].createDate) {
   					const index = seriesData.findIndex(element => element[1] == data[i].settlementUnit);
   					if (index !== -1) {
   						seriesData[index][0] += data[i].productCount;
   					} else seriesData.push([data[i].productCount, data[i].settlementUnit, data[i].createDate]);
   				}
   			}
   
   			let option = {
   				grid: {
   					top: 10,
   					bottom: 30,
   					left: 150,
   					right: 80
   				},
   				xAxis: {
   					max: 'dataMax',
   					axisLabel: {
   						formatter: function(n) {
   							return n;
   						}
   					}
   				},
   				dataset: {
   					source: seriesData
   				},
   				yAxis: {
   					type: 'category',
   					inverse: true,
   					max: 10,
   					axisLabel: {
   						interval: 0,
   						show: true,
   						fontSize: 14,
   						formatter: function(value) {
   							return value;
   						},
   						rich: {
   							flag: {
   								fontSize: 25,
   								padding: 5
   							}
   						}
   					},
   					animationDuration: 300,
   					animationDurationUpdate: 300
   				},
   				series: [{
   					realtimeSort: true,
   					seriesLayoutBy: 'column',
   					type: 'bar',
   					itemStyle: {
   						color: function(param) {
   							return colorArray[Math.round(Math.random() * 10)];
   						}
   					},
   					encode: {
   						x: dimension,
   						y: 3
   					},
   					label: {
   						show: true,
   						precision: 1,
   						position: 'right',
   						valueAnimation: true,
   						fontFamily: 'monospace'
   					}
   				}],
   				// Disable init animation.
   				animationDuration: 1000,
   				animationDurationUpdate: 500,
   				animationEasing: 'linear',
   				animationEasingUpdate: 'linear',
   				graphic: {
   					elements: [{
   						type: 'text',
   						right: 160,
   						bottom: 60,
   						style: {
   							text: dates[0],
   							font: 'bolder 80px monospace',
   							fill: 'rgba(100, 100, 100, 0.25)'
   						},
   						z: 100
   					}]
   				}
   			};
   
   			myChart.setOption(option);
   
   			for (let i = 0; i < dates.length - 1; i++) {
   				(function(i) {
   					var timer = setTimeout(function() {
   						updateDate(dates[i + 1]);
   					}, (i + 1) * updateFrequency);
   
   					window.timerList.push(timer);
   				})(i);
   			}
   
   			function updateDate(currentDate) {
   				var seriesData2 = [];
   
   				let source = data.filter(function(d) {
   					return d.createDate == currentDate;
   				});
   
   				source.forEach(item => {
   					var index = seriesData2.findIndex(element => element[1] == item.settlementUnit);
   					if (index !== -1) {
   						seriesData2[index][0] += item.productCount;
   					} else seriesData2.push([item.productCount, item.settlementUnit, item.createDate]);
   				});
   				option.series[0].data = seriesData2;
   				option.graphic.elements[0].style.text = currentDate;
   				myChart.setOption(option);
   			}
   		</script>
   	</body>
   </html>
   ```


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org