echarts 轮播图事件监听

最新推荐文章于 2024-06-29 16:25:39 发布

原创

最新推荐文章于 2024-06-29 16:25:39 发布 · 826 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个使用ECharts实现的动态时间线图表案例。通过解析数据并动态更新图表内容，展示了如何利用JavaScript和ECharts库创建交互式的垂直树状图，并结合时间线实现数据的动态展示。文章重点在于数据处理、样式配置及图表的动态更新机制。

代码解析

var chartData1 = [];
			var chartData2 = [];
			//console.log(res);
			$.each(res.datalist, function (key, value) {
				value=formatData(value,0);
				chartData2.push({
					type: 'tree',
					itemStyle: {
						color:'#ded3b0',
						borderColor: '#31a4ac',
					},
					data: value,
					left: '2%',
					right: '2%',
					top: '8%',
					bottom: '40%',
					itemStyle:{
						opacity:1
					},
					label: {
						normal: {
							backgroundColor:'#fff'
						}
					},
					orient: 'vertical',
					initialTreeDepth: 3,
					expandAndCollapse: true,
					animationDurationUpdate: 750
				});

			});
			$.each(chartData2, function (key, value) {
				chartData1.push({
					series: value
				});
			});
			drawTopoShibie(chartData1,res.timelist);