echarts-单柱状图

最新推荐文章于 2024-06-25 15:34:07 发布

iteye_8264

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量167

点赞数

文章标签： javascript ViewUI

1、问题背景

制作一个柱状图，用来统计某商店一年的销售量

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-单柱状图</title>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/build/dist/echarts-all.js" ></script>
		<script>
			$(document).ready(function(){
				var chart = document.getElementById('column');    
                var echart = echarts.init(chart);
				var option = {
				    title : {
				        text: '某商店一年的销售量'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['销售量'],
				        orient:'vertical'
				    },
				    calculable : false,
				    xAxis : [
				        {
				            type : 'category',
				            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'销售量',
				            type:'bar',
				            data:[67, 89, 52, 69, 96, 34, 135, 16, 32, 20, 64, 33]
				        }
				    ]
				};
				
				echart.setOption(option);  
				
				function eConsole(param) 
				{
				    console.log(param);
				}
				
				echart.on("click", eConsole);
			});
		</script>
	</head>
	<body>
	   <div id="column" style="width: 1350px; height: 600px;"></div>
	</body>
</html>

3、实现结果

iteye_8264

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts-单柱状图

1、问题背景制作一个柱状图，用来统计某商店一年的销售量2、实现源码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;echarts-单柱状图&lt;/title&gt; &lt;script type="text/ja
复制链接

扫一扫