笔记：Echarts - 多柱子柱状图

本文主要是介绍笔记：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>