173Echarts - 象形柱图（Expansion of forest）

效果图

源代码

	
		
		ECharts
		
		
		
		
	

	
		
		

		
			// 基于准备好的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  endYear) {
					currentYear = beginYear;
				}
				myChart.setOption({
					xAxis: {
						name: currentYear
					},
					series: [{
						data: makeSeriesData(currentYear)
					}, {
						data: makeSeriesData(currentYear, true)
					}]
				});
			}, 800);
			myChart.setOption(option);