三系列柱状图图表效果如下:
具体代码如下:
-
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>三系列柱状图案例 </title>
-
<!-- 引入 ECharts 文件 -->
-
<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"> </script>
-
</head>
-
<body>
-
<!-- 为 ECharts 准备一个具备大小(宽高)的 容器 -->
-
<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