Echarts图表之柱状图

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

大胖hy

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

阅读量815

点赞数

分类专栏： Echarts 文章标签： Echarts 图表柱状图

本文链接：https://blog.csdn.net/ghy_gong/article/details/77362893

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echarts图表之柱状图

1、在html中定义一个div，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="lib-js/echarts/js/esl/esl.js"></script>
<script src="lib-js/jquery/jquery.min.js"></script>
<script src="Chart.js"></script>
</head>
<body>
	<div>
		<div id="bar" style="float: left; width: 600px; height: 500px;"></div>
	</div>
</body>
</html>

2、下载echarts相关插件放在相应文件夹：
3、Chart.js文件如下：

$(function() {
	var fileLocation = 'lib-js/echarts/js/echarts';
	require.config({
		paths : {
			echarts : fileLocation,
			'echarts/chart/line' : fileLocation,
			'echarts/chart/bar' : fileLocation,
			'echarts/chart/pie' : fileLocation
		}
	});
	// 作为入口
	require([ 'echarts', 'echarts/chart/bar' ], displayChart);
});
function displayChart(ec) {
	var bar_chart = ec.init(document.getElementById('bar'));
	var barChartOtion = getBarChartOption();
	bar_chart.setOption(barChartOtion);
	var ecConfig = require('echarts/config');
	function eConsole(param) {
		alert(param.seriesIndex);
	}
	bar_chart.on(ecConfig.EVENT.CLICK, eConsole);
}
// 获得Bar图的选项和数据
function getBarChartOption() {
	var option = {
		title : {
			text : "人员数量",
			left : 'center',
			textStyle : {
				fontSize : 13,
			}
		},
		toolbox : {
			show : true,
			feature : {
				// mark : true,
				dataView : {
					readOnly : false
				},
				magicType : [ 'line', 'bar' ],
			// restore : true,
			// saveAsImage : true
			}
		},
		tooltip : {
			show : true,
			trigger : 'item'
		},
		legend : {
			data : [ '人员数量' ]
		},
		calculable : false,
		xAxis : [ {
			type : 'category',
			data : [ '区域1', '区域2', '区域3', '区域4', '区域5' ],
			axisLabel : {
				clickable : true,
				// interval:0,//横轴信息全部显示
				rotate : -20,// -30度角倾斜显示
				textStyle : {
					fontSize : 8,
				}
			}
		} ],
		grid : { // 控制图的大小，调整下面这些值就可以，
			x : 40,
			x2 : 100,
			y2 : 100
		// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
		},
		yAxis : [ {
			type : 'value',
			splitArea : {
				show : true
			}
		} ],
		series : [ {
			name : '人员数量',
			type : 'bar',
			data : [ 1, 3, 5, 2, 7 ],
			itemStyle : {
				normal : {
					label : {
						show : true,
						position : 'top',
						formatter : '{c}'
					}
				}
			},
		}, {
			name : '折线',
			type : 'line',
			itemStyle : { /* 设置折线颜色 */
				normal : {
					color : '#c4cddc'
				}
			},
			data : [ 1, 3, 5, 2, 7 ]
		} ]
	};
	return option;
}

效果图如下：

其中：

toolbox : {
			show : true,
			feature : {
				// mark : true,
				dataView : {
					readOnly : false
				},
				magicType : [ 'line', 'bar' ],
			// restore : true,
			// saveAsImage : true
			}
		},

显示的是图表右上方显示的工具栏，magicType : ['line','bar' ]表示可折线图和柱状图切换。

var ecConfig = require('echarts/config');
	function eConsole(param) {
		alert(param.seriesIndex);
	}
	bar_chart.on(ecConfig.EVENT.CLICK, eConsole);

表示图表选择某一项时的单机事件。

大胖hy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Echarts图表之柱状图

Echarts图表之柱状图
复制链接

扫一扫

专栏目录