54Echarts - 柱状图（Simple Encode）

时间 2021-08-15

标签 javascript html java git github markdown echarts dom ide 栏目 HTTP/TCP 繁體版

原文原文链接

效果图

源代码

<!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 option = {
				dataset: {
					source: [
						['score', 'amount', 'product'],
						[89.3, 58212, 'Matcha Latte'],
						[57.1, 78254, 'Milk Tea'],
						[74.4, 41032, 'Cheese Cocoa'],
						[50.1, 12755, 'Cheese Brownie'],
						[89.7, 20145, 'Matcha Cocoa'],
						[68.1, 79146, 'Tea'],
						[19.6, 91852, 'Orange Juice'],
						[10.6, 101852, 'Lemon Juice'],
						[32.7, 20112, 'Walnut Brownie']
					]
				},
				grid: {
					containLabel: true
				},
				xAxis: {
					name: 'amount'
				},
				yAxis: {
					type: 'category'
				},
				visualMap: {
					orient: 'horizontal',
					left: 'center',
					min: 10,
					max: 100,
					text: ['High Score', 'Low Score'],
					// Map the score column to color
					dimension: 0,
					inRange: {
						color: ['#D7DA8B', '#E15457']
					}
				},
				series: [{
					type: 'bar',
					encode: {
						// Map the "amount" column to X axis.
						x: 'amount',
						// Map the "product" column to Y axis
						y: 'product'
					}
				}]
			};

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

</html>

1. 54Echarts - 柱状图（Simple Example of Dataset）
2. 40Echarts - 柱状图（Bar Simple）
3. 41Echarts - 柱状图（堆叠柱状图）
4. 30Echarts - 柱状图（柱状图框选）
5. Matplotlib柱状图、饼状图
6. Echarts柱状图，饼状图
7. 柱状图
8. 双柱状图
9. echarts柱状图
10. Echarts柱状图
更多相关文章...
• HTTP状态码 - HTTP 教程
• XSL-FO simple-page-master 对象 - XSL-FO 教程
• Kotlin学习（一）基本语法
• 算法总结-股票买卖