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);
表示图表选择某一项时的单机事件。