提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

33Echarts - 柱状图（Large Scale Bar Chart）

柱状图 large Chart scale bar
2023-09-11 14:15:43 时间

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>

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

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			var dataCount = 5e5;
			var data = generateData(dataCount);

			var option = {
				title: {
					text: echarts.format.addCommas(dataCount) + ' Data',
					left: 10
				},
				toolbox: {
					feature: {
						dataZoom: {
							yAxisIndex: false
						},
						saveAsImage: {
							pixelRatio: 2
						}
					}
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					bottom: 90
				},
				dataZoom: [{
					type: 'inside'
				}, {
					type: 'slider'
				}],
				xAxis: {
					data: data.categoryData,
					silent: false,
					splitLine: {
						show: false
					},
					splitArea: {
						show: false
					}
				},
				yAxis: {
					splitArea: {
						show: false
					}
				},
				series: [{
					type: 'bar',
					data: data.valueData,
					// Set `large` for large data amount
					large: true
				}]
			};

			function generateData(count) {
				var baseValue = Math.random() * 1000;
				var time = +new Date(2011, 0, 1);
				var smallBaseValue;

				function next(idx) {
					smallBaseValue = idx % 30 === 0 ?
						Math.random() * 700 :
						(smallBaseValue + Math.random() * 500 - 250);
					baseValue += Math.random() * 20 - 10;
					return Math.max(
						0,
						Math.round(baseValue + smallBaseValue) + 3000
					);
				}

				var categoryData = [];
				var valueData = [];

				for(var i = 0; i < count; i++) {
					categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time));
					valueData.push(next(i).toFixed(2));
					time += 1000;
				}

				return {
					categoryData: categoryData,
					valueData: valueData
				};
			}

			myChart.setOption(option);
		</script>
	</body>

</html>

相关文章