echarts三系列柱状图

三系列柱状图图表效果如下：

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三系列柱状图案例 </title>
<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"> </script>
</head>
<body>
<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #FF0000;"> </div>
</body>
</html>
<script type="text/javascript">
// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
var chart1 = echarts.init( document.getElementById( "chart1"));
var dataX = [ '幼儿园', '小学', '中职', '初中', '高职', '高中', '大专', '本科', '硕士', '博士', '其它'];
var dataY1 = [ 100, 350, 500, 680, 880, 660, 500, 460, 340, 290, 180]; // 总和
var dataY2 = [ 80, 250, 350, 480, 580, 360, 260, 200, 240, 200, 95]; // 市内
var dataY3 = [ 20, 100, 150, 200, 300, 300, 240, 260, 100, 90, 85]; // 市外
option = {
backgroundColor: '#000',
title : { // 标题
text : '各教育阶段人数统计', // 标题文本内容
left : 'center', // 标题左右居中
textStyle : { // 标题样式
color : '#ddd', // 标题字体颜色
fontSize : '30', // 标题字体大小
}
},
legend: {
textStyle: {
color: '#fff',
},
top: "35%",
right: "2%", // 图例组件离容器右侧的距离。
orient: 'vertical', // 图例列表的布局朝向,'horizontal'为横向,'vertical'为纵向.
data: [ '总和', '市内', '市外']
},
grid: {
containLabel: false // grid 区域是否包含坐标轴的刻度标签。
// false : 这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。
// true :这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
},
tooltip: {
show: "true",
trigger: 'item',
//backgroundColor: 'rgba(0,0,0,0.7)', // 背景
//padding: [8, 10], //内边距
//extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
formatter : "{a}<br/>{b} : {c}人"
},
xAxis: {
type: 'category',
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: '12',
},
formatter: function(value){
return value.split( "").join( "\n")
},
},
data: dataX
},
yAxis: {
type: 'value',
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
}
},
splitLine: {
show: true,
lineStyle: {
color: '#fff',
type: 'dashed',
opacity: 0.5
}
},
axisLabel: {
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: '12',
},
},
},
series: [{
name: '总和',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{
offset: 0.3,
color: '#00BFFF'
}, {
offset: 1,
color: '#0500ff'
}]),
barBorderRadius: 0,
borderWidth: 0,
}
},
zlevel: 2,
barWidth: '10%',
data: dataY1
}, {
name: '市内',
type: 'bar',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{
offset: 0,
color: '#01babc'
}, {
offset: 0.5,
color: '#fff'
}, {
offset: 1,
color: '#01babc'
}]),
barBorderRadius: 0, // (默认为0,即方角)圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。如:barBorderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
borderWidth: 0, // 柱条的描边宽度，默认不描边。
}
},
zlevel: 2, // 柱状图所有图形的 zlevel 值。zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
barGap: '100%', // 柱间距离，可设固定值（如 20）或者百分比（如 '30%'，表示柱子宽度的 30%）。如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
data: dataY2
}, {
name: '市外',
type: 'bar',
barWidth: '10%',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{
offset: 0,
color: '#7049f0'
}, {
offset: 0.5,
color: '#fff'
}, {
offset: 1,
color: '#7049f0'
}]),
barBorderRadius: 0,
borderWidth: 0,
}
},
zlevel: 2,
barGap: '100%',
data: dataY3
}
]
};
// 使用刚指定的配置项和数据显示图表
chart1.setOption(option)
</script>

想要使用该图表,只需要复制以上代码 ,再下载 echarts.js 在页面文件中引入即可.

echarts.js 下载链接: http://echarts.baidu.com/download.html

echarts三系列柱状图

猜你喜欢