笔记：Echarts - 多柱子柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-多柱子柱状图</title>
<style> body, html { width: 100%; height: 100%; } .section { width: 915px; border: 1px solid #ccc; } #barsDemo { width: 100%; height: 400px; } </style>
</head>
<body>
<div class="section">
<div id="barsDemo"></div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script> $(function () { initData(); }); //生成数据 function initData() { var legendData = ['甲', '乙','丙']; var bgColorList = ['#FBB730', '#31BDF2','#6197fb']; var axisLabel = ['化学', '数学', '地理', '物理', '英语', '音乐', '语文', '历史', '美术', '生物', '信息技术', '政治', '体育']; var seriesValue = []; for (var i = 0; i < legendData.length; i++) { var arrData = []; var seriesDataVal = null; for (var j = 0; j < axisLabel.length; j++) { arrData.push(Math.floor(Math.random() * 100)); } seriesDataVal = { barWidth: 10,//柱状条宽度 name:legendData[i], type:'bar', itemStyle: { normal: { show: true,//鼠标悬停时显示label数据 barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果 color: bgColorList[i] } }, label: { normal: { show: true, //显示数据 position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom' } } , data:arrData }; seriesValue.push(seriesDataVal); } buildChart(legendData, axisLabel, seriesValue); } //生成Echarts图形 function buildChart(legendData, axisLabel, seriesValue) { var chart = document.getElementById('barsDemo'); var echart = echarts.init(chart); var option = { title: { text: "学科兴趣倾向分析",//正标题 x: "center", //标题水平方向位置 y: "0", //标题竖直方向位置 textStyle: { fontSize: 18, fontWeight: 'normal', color: '#666' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow'//阴影，若须要为直线，则值为'line' } }, toolbox: { show: true, feature: { saveAsImage: {show: true} } }, legend: { data: legendData, y: 'bottom'//图例说明文字设置 }, grid: { left: '3%', right: '4%', bottom: '10%', top:'10%', containLabel: true }, xAxis: [{ min: 0, type: 'category', //纵向柱状图，若须要为横向，则此处值为'value'， 下面 yAxis 的type值为'category' data: axisLabel }], yAxis: [{ min: 0, type: 'value', splitArea: {show: false} }], label: { normal: { //显示bar数据 show: true, position: 'top' } }, series: seriesValue }; echart.setOption(option); } </script>
</body>
</html>
效果图：
javascript