效果图

在这里插入图片描述

源代码
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 1024px;height:768px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;
			var treeDataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA2CAYAAADUOvnEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5tJREFUeNrcWE1oE0EUnp0kbWyUpCiNYEpCFSpIMdpLRTD15s2ePHixnj00N4/GoyfTg2fbiwdvvagHC1UQ66GQUIQKKgn1UAqSSFua38b3prPJZDs7s5ufKn0w7CaZ2W/fe9/73kyMRqNB3Nrj1zdn4RJ6du9T2u1a2iHYSxjP4d41oOHGQwAIwSUHIyh8/RA8XeiXh0kLGFoaXiTecw/hoTG4ZCSAaFkY0+BpsZceLtiAoV2FkepZSDk5EpppczBvpuuQCqx0YnkYcVVoqQYMyeCG+lFdaGkXeVOFNu4aEBalOBk6sbQrQF7gSdK5JXjuHXuYVIVyr0TZ0FjKDeCs6km7JYMUdrWAUVmZUBtmRnVPK+x6nIR2xomH06R35ggwJPeofWphr/W5UjPIxq8B2bKgE8C4HVHWvg+2gZjXj19PkdFztY7bk9TDCH/g6oafDPpaoMvZIRI5WyMB/0Hv++HkpTKE0kM+A+h20cPAfN4GuRyp9G+LMTW+z8rCLI8b46XO9zRcYZTde/j0AZm8WGb3Y2F9KLlE2nqYkjFLJAsDOl/lea0q55mqxXcL7YBc++bsCPMe8mUyU2ZIpnCoblca6TZA/ga2Co8PGg7UGUlEDd0ueptglbrRZLLE7poti6pCaWUo2pu1oaYI1CF9b9cCZPO3F8ikJQ/rPpQT5YETht26ss+uCIL2Y8vHwJGpA96GI5mjOlaKhowUy6BcNcgIhDviTGWCGFaqEuufWz4pgcbCh+w0gEOyOjTlTtYYlIWPYWKEsLDzOs+nhzaO1KEpd+MXpOoTUgKiNyhdy5aSMPNVqxtSsJFgza5EWA4zKtCJ2OGbLn0JSLu8+SL4G86p1Fpr7ABXdGFF/UTD4rfmFYFw4G9VAJ9SM3aF8l3yok4/J6IV9sDVb36ynmtJ2M5+CwxTYBdKNMBaocKGV2nYgkz6r+cHBP30MzAfi4Sy+BebSoPIOi8PW1PpCCvr/KOD4k9Zu0WSH0Y0+SxJ2awp/nlwKtcGyHOJ8vNHtRJzhPlsHr8MogtlVtwUU0tSM1x58upSKbfJnSKUR07GVMKkDNfXpzpv0RTHy3nZMVx5IOWdZIaPabGFvfpwpjnvfmJHXLaEvZUTseu/TeLc+xgAPhEAb/PbjO6PBaOTf6LQRh/dERde23zxLtOXbaKNhfq2L/1fAOPHDUhOpIf5485h7l+GNHHiSYPKE3Myz9sFxoJuAyazvwIMAItferha5LTqAAAAAElFTkSuQmCC';

			var beginYear = 2016;
			var endYear = 2050;
			var lineCount = 10;

			// Basic option:
			option = {
				color: ['#e54035'],
				xAxis: {
					axisLine: {
						show: false
					},
					axisLabel: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					name: beginYear,
					nameLocation: 'middle',
					nameGap: 40,
					nameTextStyle: {
						color: 'green',
						fontSize: 30,
						fontFamily: 'Arial'
					},
					min: -2800,
					max: 2800
				},
				yAxis: {
					data: makeCategoryData(),
					show: false
				},
				grid: {
					top: 'center',
					height: 280
				},
				series: [{
					name: 'all',
					type: 'pictorialBar',
					symbol: 'image://' + treeDataURI,
					symbolSize: [30, 55],
					symbolRepeat: true,
					data: makeSeriesData(beginYear),
					animationEasing: 'elasticOut'
				}, {
					name: 'all',
					type: 'pictorialBar',
					symbol: 'image://' + treeDataURI,
					symbolSize: [30, 55],
					symbolRepeat: true,
					data: makeSeriesData(beginYear, true),
					animationEasing: 'elasticOut'
				}]
			};

			// Make fake data.
			function makeCategoryData() {
				var categoryData = [];
				for(var i = 0; i < lineCount; i++) {
					categoryData.push(i + 'a');
				}
				return categoryData;
			}

			function makeSeriesData(year, negative) {
				// make a fake value just for demo.
				var r = (year - beginYear + 1) * 10;
				var seriesData = [];

				for(var i = 0; i < lineCount; i++) {
					var sign = (negative ? -1 * ((i % 3) ? 0.9 : 1) : 1 * (((i + 1) % 3) ? 0.9 : 1));
					seriesData.push({
						value: 0,
						value: sign * (
							year <= beginYear + 1 ?
							(Math.abs(i - lineCount / 2 + 0.5) < lineCount / 5 ? 5 : 0) :
							(lineCount - Math.abs(i - lineCount / 2 + 0.5)) * r
						),
						symbolOffset: (i % 2) ? ['50%', 0] : null
					});
				}
				return seriesData;
			}

			// Set dynamic data.
			var currentYear = beginYear;
			setInterval(function() {
				currentYear++;
				if(currentYear > endYear) {
					currentYear = beginYear;
				}
				myChart.setOption({
					xAxis: {
						name: currentYear
					},
					series: [{
						data: makeSeriesData(currentYear)
					}, {
						data: makeSeriesData(currentYear, true)
					}]
				});
			}, 800);
			myChart.setOption(option);
		</script>
	</body>

</html>
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

cover

ChatGPT 提示词：2024最新AIGC提示词大全

avatar 开放原子开发者工作坊

项目实战9—企业级分布式存储应用与实战MogileFS、FastDFS

企业级分布式存储应用与实战-mogilefs　　环境：公司已经有了大量沉淀用户，为了让这些沉淀用户长期使用公司平台，公司决定增加用户粘性，逐步发展基于社交属性的多样化业务模式，决定开展用户讨论区、卖家秀、买家秀、用户试穿短视频等业务，因此，公司新的业务的业务特征将需要海量数据存储，你的领导要求基于开源技术，实现对公司海量存储业务的技术研究和实现，你可以完成任务吗？总项目流程图，详见...

avatar 开放原子开发者工作坊

.NET Core开源API网关 – Ocelot中文文档

.NET Core开源API网关 – Ocelot中文文档原文:.NET Core开源API网关 – Ocelot中文文档Ocelot是一个用.NET Core实现并且开源的API网关，它功能强大，包括了：路由、请求聚合、服务发现、认证、鉴权、限流熔断、并内置了负载均衡器与Service Fabric、Butterfly Tracing集成。...

avatar 开放原子开发者工作坊