前言：柱状图主要分横着的柱状图和竖着的柱状图，以及和其他类型图混搭图形。本文主要说明前两种类型，并未涵盖所有属性，主要是经常用到的属性。
- 准备工作
到echarts3（注意是echarts3，不是echarts2）官方下载echarts或者自定义下载，下载地址：http://echarts.baidu.com/download.html - 示例及说明
代码中未说明的配置项，可以在官网查看。还有很多配置属性，示例中并没有使用到。配置文档地址：http://echarts.baidu.com/option.html#tooltip.trigger
另外，关于柱状图横坐标显示不全的问题，可以参考这边博客，方法比较全：
eg1，效果图:
eg1说明：示例1与示例2不同的是，示例1中的两个柱状图是重合的，有覆盖和先后级，但是示例2是叠加的，不同之处可详读代码。另外，本例中的自定义图片，如果您想在本地测试，需自己准备图片。
eg1，横向柱状图代码及注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<div id="pie1" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('pie1'));
option1 = {
title : {
subtext : '活动数量',
subtextStyle : {
'color' : '#6E6E6E',
'fontStyle' : 'normal',
'fontWeight' : 'lighter',
'fontSize' : 14,
'verticalAlign' : 'middle',
},
left : '24%',
},//标题属性
tooltip : {
trigger: 'item', // 可选item和axis和none,柱状图主要用axis，效果可以自行切换试试属性效果
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: {
width: 0,
},//线条颜色,宽度等属性
},//该属性与trigger属性密切相关
formatter:function(val){ //让series 中的文字进行换行
var content = '';
content += val['seriesName'];
content += '<br />';
content += '人数';
content += ':';
content += val['value'];
return content;
},//自定义鼠标放在柱状图上显示的内容，可以console.log(val);查看val详细属性，鼠标放在柱状图上会触发该事件
},//鼠标放在柱状图上显示效果控制
legend: {
show: true,
data: ['有效用户数', '用户总量'],//与series中name相对应
left: '65%',//距离左侧的百分比
//top: '40%',//距离顶部百分比
//orient: 'vertical',//横向还是纵向展示，默认横向
},//图例属性，就是不同颜色柱状图的说明
grid: {
left: '25%',//距离左侧的百分比
right: '25%',
bottom: '10%',
containLabel: true,//grid 区域是否包含坐标轴的刻度标签。
},//图的位置确定
minInterval:1,//自动计算的坐标轴最小间隔大小
xAxis: {
name : '人数',//x轴说明
type: 'value',//坐标轴类型
splitLine:{
show:true,
lineStyle:{
color:'#DCDCDC',
width: 1,
type: 'dotted',//虚线
},
},
axisLabel : {
interval : 0,//横轴信息全部显示
rotate : -20,//-20度角倾斜显示
},
axisTick: {
show: true,
inside:false,//坐标刻度朝内朝外
},//刻度显示控制
splitNumber: 10,//X轴分割段数
},//x轴属性控制
yAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#fff',
width: '1',
}
},//坐标轴属性
axisLabel: {
textStyle: {
color: 'black',//坐标值的具体的颜色
}
},
data: ['一中','二中','三中','四中','五中'],
},
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ['一中','二中','三中','四中','五中'],
},//创建两个y轴，series中默认使用第一个，可以用yAxisIndex(值从0开始)属性说明使用哪一个，如果只有一个y轴，则两个柱形图只会叠加不会重合
],
series: [
{
name: '有效用户数',
type: 'bar',
barWidth : 20,
z:2,//层级，值大的会覆盖小的
markPoint : {
data : [
{name: '第一名',symbol:'image://images/01.png',xAxis:600, yAxis:4},
{name: '第二名',symbol:'image://images/02.png',xAxis:500, yAxis:0},
],
symbolSize:[17,23],//标记宽高
symbolOffset:['100%',0],//标记上下左右偏移量
label:{
normal:{
show:false,
},
},
},//自定义前两名标志
itemStyle:{
normal: {
color:'#91c7ae',
barBorderRadius:[0, 10, 10, 0],//柱形图圆角
label: {
show: true,//是否展示
textStyle: {
fontWeight:'bolder',
fontSize : '12',
fontFamily : '微软雅黑',
}
}
},
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},//柱形数据显示属性，还有一个属性是emphasis，与normal同级，鼠标放在柱形图上显示信息属性
data: [320, 302, 301, 334, 390]
},
{
name: '用户总量',
type: 'bar',
barWidth : 20,
yAxisIndex: 1,
z:1,
itemStyle:{
normal: {
//柱形图圆角，初始化效果
color:'#d48265',
barBorderRadius:[0, 10, 10, 0],
label: {
show: true,//是否展示
textStyle: {
fontWeight:'bolder',
fontSize : '12',
fontFamily : '微软雅黑',
}
}
},
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [500, 320, 400, 380, 600],
},
]
};
myChart1.setOption(option1);
</script>
</head>
</html>eg2，效果图：
eg2说明：由于很多属性与示例1相似，故代码中没有做过多的注释，不同的是，示例1中的两个柱状图是重合的，但是示例2是叠加的，不同之处可详读代码。
eg2代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<div id="pie1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('pie1'));
option1 = {
title : {
subtext : '人数',
subtextStyle : {
'color' : '#6E6E6E',
'fontStyle' : 'normal',
'fontWeight' : 'lighter',
'fontSize' : 14,
'verticalAlign' : 'middle',
},
left : '10%',
},//标题属性
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['有效用户数', '用户总量'],
left: '60%',//距离左侧的百分比
},
grid: {
left: '10%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
name : '学校',//x轴说明
type: 'category',
data: ['一中','二中','三中','四中','五中'],
},
yAxis: {
type: 'value',
splitLine:{
show:true,
lineStyle:{
color:'#DCDCDC',
width: 1,
type: 'dotted',//虚线
},
},
splitNumber: 10,//y轴分割段数
},
series: [
{
name: '有效用户数',
type: 'bar',
stack: '总量',
barWidth : 20,
itemStyle:{
normal: {
//柱形图圆角，初始化效果
color:'#d48265',
//barBorderRadius:[0, 10, 10, 0],
label: {
show: true,//是否展示
textStyle: {
fontWeight:'bolder',
fontSize : '12',
fontFamily : '微软雅黑',
}
}
},
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [320, 302, 301, 334, 390]
},
{
name: '用户总量',
type: 'bar',
stack: '总量',
barWidth : 20,
itemStyle:{
normal: {
//柱形图圆角，初始化效果
color:'#91c7ae',
barBorderRadius:[10, 10, 0, 0],
label: {
show: true,//是否展示
textStyle: {
fontWeight:'bolder',
fontSize : '12',
fontFamily : '微软雅黑',
}
}
},
},
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [120, 132, 101, 134, 90],
},
]
};
myChart1.setOption(option1);
</script>
</head>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
