柱状图 描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以以清晰的看出每个分类数据的排名情况。
图表1：柱状图
旧版echarts的显示
实现步骤
ECharts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option
X轴数据：
数组1：[‘张三’，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
Y轴数据：
数组2：[88,92,63,77,94,80,72,86]
图表类型
在series设置type:bar //bar是柱状图，line是线状，pie是饼状
常见效果
最大值/ 最小值 markPoint
平均值 markLine
数值显示 label
柱宽度 barWidth
<!--
1.ECharts最基本的代码结构
2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
3.y轴数据：[88,92,63,77,94,80,72,86]
4.将type的值设置为bar
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts= echarts.init(document.querySelector('div'))
var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
var yDaraArr=[70,92,85,89,77,90,87,98]
var option={
xAxis:{
type:'category', //类目轴
data:xDataArr
},
yAxis:{
type:'value' //数值轴
},
series:[
{
name:'语文',
type:'bar', //bar是柱状图，line是线状，pie是饼状
markPoint:{
data:[
{
type:'max',name:'最大值'
},{
type:'min',name:'最小值'
}
]
},
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
},
label:{
show: true,
position:'top'
},
barWidth:'30%',
data:yDaraArr
}
]
}
//步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
横向柱状图
<!--
1.ECharts最基本的代码结构
2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
3.y轴数据：[88,92,63,77,94,80,72,86]
4.将type的值设置为bar
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts= echarts.init(document.querySelector('div'))
var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
var yDaraArr=[70,92,85,89,77,90,87,98]
var option={
xAxis:{
type:'value' //类目轴
},
yAxis:{
type:'category' ,//数值轴
data:xDataArr
},
series:[
{
name:'语文',
type:'bar', //bar是柱状图，line是线状，pie是饼状
markPoint:{
data:[
{
type:'max',name:'最大值'
},{
type:'min',name:'最小值'
}
]
},
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
},
label:{
show: true,
position:'right'
},
barWidth:'30%',
data:yDaraArr
}
]
}
//步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
因篇幅问题不能全部显示，请点此查看更多更全内容