test/bar-large.html - echarts - Git at Google

 <html>
     <head>
         <meta charset="utf-8">
         <script src="lib/esl.js"></script>
         <script src="lib/config.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
     <body>
         <style>
             html, body, #main {
                 width: 100%;
                 height: 100%;
                 margin: 0;
             }
             #main {
                 background: #fff;
             }
         </style>
         <div id="main"></div>
         <script>

             require([
                 'echarts'
                 // 'echarts/chart/bar',
                 // 'echarts/chart/line',
                 // 'echarts/component/legend',
                 // 'echarts/component/grid',
                 // 'echarts/component/tooltip',
                 // 'echarts/component/title',
                 // 'echarts/component/toolbox'
             ], function (echarts) {

                 var chart = echarts.init(document.getElementById('main'));

                 var xAxisData = [];
                 var data1 = [];
                 var data2 = [];
                 var data3 = [];
                 var data4 = [];

                 for (var i = 0; i < 100; i++) {
                     xAxisData.push('类目' + i);
                     data1.push((Math.random() * 5).toFixed(2));
                     data2.push(Math.random().toFixed(2));
                     data3.push((Math.random() + 0.5).toFixed(2));
                     data4.push((Math.random() + 0.3).toFixed(2));
                 }

                 var data = [["4.70","4.69","2.48","0.77","3.08","4.57","2.68","3.35","0.37","1.86","2.68","0.64","1.82","1.88","0.31","0.45","4.48","3.08","1.58","2.98","1.87","0.96","3.43","2.58","0.41","2.69","0.59","3.47","4.33","1.75","0.51","1.01","1.60","3.62","2.29","2.40","1.52","2.30","0.18","3.99","0.26","2.92","2.94","0.54","2.98","3.71","2.24","0.32","1.98","2.56","1.81","4.67","2.49","1.73","1.79","2.79","3.39","1.83","3.24","3.76","1.23","1.69","3.55","2.66","1.83","3.69","2.70","0.75","0.71","1.44","3.23","1.49","1.50","3.61","4.41","1.26","2.93","2.84","4.11","0.80","2.67","2.59","2.71","4.85","1.28","1.21","4.32","4.04","1.15","4.38","4.41","4.94","4.13","0.86","1.97","3.58","3.02","1.29","1.47","3.75"],["0.78","0.90","0.54","0.75","0.68","0.68","0.84","0.87","0.78","0.79","0.77","0.34","0.81","0.80","0.28","0.87","0.98","0.92","0.66","0.87","0.88","0.56","0.34","0.67","0.60","0.00","0.22","0.87","0.81","0.69","0.41","0.02","0.18","0.55","0.48","0.90","0.62","0.17","0.37","0.35","0.31","0.78","0.34","0.56","0.22","0.87","0.55","0.94","0.58","0.66","0.33","0.73","0.78","0.44","0.79","0.12","0.81","0.77","0.33","0.30","0.86","0.87","0.09","0.91","0.90","0.34","0.76","0.93","0.55","0.41","0.63","0.96","0.80","0.41","0.53","0.53","0.66","0.24","0.24","0.99","0.92","0.85","0.44","0.92","0.28","0.61","0.20","0.74","0.52","0.91","0.42","0.08","0.00","0.57","0.81","0.39","0.41","0.72","0.02","0.20"],["1.17","0.65","0.98","1.08","1.02","1.41","1.01","1.17","0.63","0.94","0.78","1.43","0.67","1.09","1.29","0.60","0.50","1.38","0.76","0.94","0.79","1.44","0.55","1.48","1.13","0.63","1.07","0.57","1.43","0.81","0.87","0.70","1.04","1.43","1.00","0.50","0.54","0.57","0.97","0.58","1.19","0.73","0.76","0.75","1.39","0.93","0.60","1.28","1.14","1.18","0.60","0.59","1.46","0.64","1.44","0.59","1.49","0.84","0.71","1.44","1.11","1.18","1.40","0.64","1.15","1.07","1.35","0.86","1.13","1.41","1.03","0.57","1.44","0.93","1.47","1.16","1.40","1.14","0.97","0.78","1.49","0.59","0.99","1.35","0.88","1.02","1.16","1.07","0.81","0.87","1.34","0.98","1.17","1.46","0.71","1.13","0.80","1.24","0.76","0.68"],["1.04","0.54","0.55","1.05","1.20","1.13","0.53","0.63","0.82","0.52","0.86","0.33","0.64","1.14","0.47","0.72","0.97","1.18","1.02","0.53","1.14","1.24","1.13","0.60","0.47","0.94","0.64","0.43","0.71","0.33","0.46","0.82","0.80","0.97","0.43","1.29","0.65","0.92","0.63","0.58","0.31","1.09","0.35","0.43","1.19","0.47","0.59","0.52","0.79","0.69","0.54","0.39","0.33","1.26","0.40","0.76","0.80","0.96","0.82","1.26","0.70","0.50","0.67","1.27","1.24","0.49","0.94","0.97","0.90","1.03","1.28","0.46","0.57","1.23","0.40","0.71","1.08","0.51","1.03","0.38","0.81","0.44","1.02","0.79","1.08","1.01","0.66","0.80","0.65","0.97","0.56","0.33","0.61","0.92","0.40","0.77","1.05","1.21","0.34","0.84"]];

                 chart.setOption({
                     legend: {
                         data: ['bar', 'bar2', 'bar3', 'bar4'],
                         align: 'left'
                     },
                     toolbox: {
                         // y: 'bottom',
                         feature: {
                             magicType: {
                                 type: ['line', 'bar', 'stack', 'tiled']
                             },
                             dataZoom: {
                                 yAxisIndex: false
                             },
                             dataView: {},
                             saveAsImage: {
                                 pixelRatio: 2
                             }
                         }
                     },
                     tooltip: {},
                     dataZoom: [{
                         startValue: 48,
                         endValue: 99,
                         type: 'inside'
                     }, {
                         startValue: 48,
                         endValue: 99,
                         type: 'slider'
                     }],
                     xAxis: {
                         data: xAxisData,
                         silent: false,
                         splitLine: {
                             show: false
                         },
                         splitArea: {
                             show: false
                         }
                     },
                     yAxis: {
                         splitArea: {
                             show: false
                         }
                     },
                     series: [{
                         name: 'bar',
                         type: 'bar',
                         stack: 'one',
                         data: data[0]
                     }, {
                         show: false,
                         name: 'bar2',
                         type: 'bar',
                         stack: 'one',
                         data: data[1]
                     }, {
                         name: 'bar3',
                         type: 'bar',
                         stack: 'two',
                         data: data[2]
                     }, {
                         name: 'bar4',
                         type: 'bar',
                         stack: 'two',
                         data: data[3],
                         silent: true
                     }],
                     animationDelay: function (idx) {
                         return idx * 5;
                     },
                     animationDelayUpdate: function (idx) {
                         return idx * 5;
                     }
                 });

                 chart.on('click', function (params) {
                     console.log(params);
                 });

                 window.onresize = chart.resize;
             });
         </script>
     </body>
 </html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="lib/esl.js"></script>
	<script src="lib/config.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body>
	<style>
	html, body, #main {
	width: 100%;
	height: 100%;
	margin: 0;
	}
	#main {
	background: #fff;
	}
	</style>
	<div id="main"></div>
	<script>

	require([
	'echarts'
	// 'echarts/chart/bar',
	// 'echarts/chart/line',
	// 'echarts/component/legend',
	// 'echarts/component/grid',
	// 'echarts/component/tooltip',
	// 'echarts/component/title',
	// 'echarts/component/toolbox'
	], function (echarts) {

	var chart = echarts.init(document.getElementById('main'));

	var xAxisData = [];
	var data1 = [];
	var data2 = [];
	var data3 = [];
	var data4 = [];

	for (var i = 0; i < 100; i++) {
	xAxisData.push('类目' + i);
	data1.push((Math.random() * 5).toFixed(2));
	data2.push(Math.random().toFixed(2));
	data3.push((Math.random() + 0.5).toFixed(2));
	data4.push((Math.random() + 0.3).toFixed(2));
	}

	var data = [["4.70","4.69","2.48","0.77","3.08","4.57","2.68","3.35","0.37","1.86","2.68","0.64","1.82","1.88","0.31","0.45","4.48","3.08","1.58","2.98","1.87","0.96","3.43","2.58","0.41","2.69","0.59","3.47","4.33","1.75","0.51","1.01","1.60","3.62","2.29","2.40","1.52","2.30","0.18","3.99","0.26","2.92","2.94","0.54","2.98","3.71","2.24","0.32","1.98","2.56","1.81","4.67","2.49","1.73","1.79","2.79","3.39","1.83","3.24","3.76","1.23","1.69","3.55","2.66","1.83","3.69","2.70","0.75","0.71","1.44","3.23","1.49","1.50","3.61","4.41","1.26","2.93","2.84","4.11","0.80","2.67","2.59","2.71","4.85","1.28","1.21","4.32","4.04","1.15","4.38","4.41","4.94","4.13","0.86","1.97","3.58","3.02","1.29","1.47","3.75"],["0.78","0.90","0.54","0.75","0.68","0.68","0.84","0.87","0.78","0.79","0.77","0.34","0.81","0.80","0.28","0.87","0.98","0.92","0.66","0.87","0.88","0.56","0.34","0.67","0.60","0.00","0.22","0.87","0.81","0.69","0.41","0.02","0.18","0.55","0.48","0.90","0.62","0.17","0.37","0.35","0.31","0.78","0.34","0.56","0.22","0.87","0.55","0.94","0.58","0.66","0.33","0.73","0.78","0.44","0.79","0.12","0.81","0.77","0.33","0.30","0.86","0.87","0.09","0.91","0.90","0.34","0.76","0.93","0.55","0.41","0.63","0.96","0.80","0.41","0.53","0.53","0.66","0.24","0.24","0.99","0.92","0.85","0.44","0.92","0.28","0.61","0.20","0.74","0.52","0.91","0.42","0.08","0.00","0.57","0.81","0.39","0.41","0.72","0.02","0.20"],["1.17","0.65","0.98","1.08","1.02","1.41","1.01","1.17","0.63","0.94","0.78","1.43","0.67","1.09","1.29","0.60","0.50","1.38","0.76","0.94","0.79","1.44","0.55","1.48","1.13","0.63","1.07","0.57","1.43","0.81","0.87","0.70","1.04","1.43","1.00","0.50","0.54","0.57","0.97","0.58","1.19","0.73","0.76","0.75","1.39","0.93","0.60","1.28","1.14","1.18","0.60","0.59","1.46","0.64","1.44","0.59","1.49","0.84","0.71","1.44","1.11","1.18","1.40","0.64","1.15","1.07","1.35","0.86","1.13","1.41","1.03","0.57","1.44","0.93","1.47","1.16","1.40","1.14","0.97","0.78","1.49","0.59","0.99","1.35","0.88","1.02","1.16","1.07","0.81","0.87","1.34","0.98","1.17","1.46","0.71","1.13","0.80","1.24","0.76","0.68"],["1.04","0.54","0.55","1.05","1.20","1.13","0.53","0.63","0.82","0.52","0.86","0.33","0.64","1.14","0.47","0.72","0.97","1.18","1.02","0.53","1.14","1.24","1.13","0.60","0.47","0.94","0.64","0.43","0.71","0.33","0.46","0.82","0.80","0.97","0.43","1.29","0.65","0.92","0.63","0.58","0.31","1.09","0.35","0.43","1.19","0.47","0.59","0.52","0.79","0.69","0.54","0.39","0.33","1.26","0.40","0.76","0.80","0.96","0.82","1.26","0.70","0.50","0.67","1.27","1.24","0.49","0.94","0.97","0.90","1.03","1.28","0.46","0.57","1.23","0.40","0.71","1.08","0.51","1.03","0.38","0.81","0.44","1.02","0.79","1.08","1.01","0.66","0.80","0.65","0.97","0.56","0.33","0.61","0.92","0.40","0.77","1.05","1.21","0.34","0.84"]];

	chart.setOption({
	legend: {
	data: ['bar', 'bar2', 'bar3', 'bar4'],
	align: 'left'
	},
	toolbox: {
	// y: 'bottom',
	feature: {
	magicType: {
	type: ['line', 'bar', 'stack', 'tiled']
	},
	dataZoom: {
	yAxisIndex: false
	},
	dataView: {},
	saveAsImage: {
	pixelRatio: 2
	}
	}
	},
	tooltip: {},
	dataZoom: [{
	startValue: 48,
	endValue: 99,
	type: 'inside'
	}, {
	startValue: 48,
	endValue: 99,
	type: 'slider'
	}],
	xAxis: {
	data: xAxisData,
	silent: false,
	splitLine: {
	show: false
	},
	splitArea: {
	show: false
	}
	},
	yAxis: {
	splitArea: {
	show: false
	}
	},
	series: [{
	name: 'bar',
	type: 'bar',
	stack: 'one',
	data: data[0]
	}, {
	show: false,
	name: 'bar2',
	type: 'bar',
	stack: 'one',
	data: data[1]
	}, {
	name: 'bar3',
	type: 'bar',
	stack: 'two',
	data: data[2]
	}, {
	name: 'bar4',
	type: 'bar',
	stack: 'two',
	data: data[3],
	silent: true
	}],
	animationDelay: function (idx) {
	return idx * 5;
	},
	animationDelayUpdate: function (idx) {
	return idx * 5;
	}
	});

	chart.on('click', function (params) {
	console.log(params);
	});

	window.onresize = chart.resize;
	});
	</script>
	</body>
	</html>