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

zl程序教程

您现在的位置是：首页 >  大数据

当前栏目

207Echarts - 数据集（Series Layout By Column or Row）

数据 or by Column row layout Series
2023-09-11 14:15:41 时间

效果图

在这里插入图片描述

源代码

<!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;

			option = {
			    legend: {},
			    tooltip: {},
			    dataset: {
			        source: [
			            ['product', '2012', '2013', '2014', '2015'],
			            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
			            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
			            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
			        ]
			    },
			    xAxis: [
			        {type: 'category', gridIndex: 0},
			        {type: 'category', gridIndex: 1}
			    ],
			    yAxis: [
			        {gridIndex: 0},
			        {gridIndex: 1}
			    ],
			    grid: [
			        {bottom: '55%'},
			        {top: '55%'}
			    ],
			    series: [
			        // These series are in the first grid.
			        {type: 'bar', seriesLayoutBy: 'row'},
			        {type: 'bar', seriesLayoutBy: 'row'},
			        {type: 'bar', seriesLayoutBy: 'row'},
			        // These series are in the second grid.
			        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
			        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
			        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
			        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
			    ]
			};

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

</html>

相关文章