您的位置：首页 > 其它

笔记：Echarts - 堆叠柱状图

2017-11-08 14:36 435 查看

由于项目中大多统计图用到的Echarts属性值都大同小异且设计中统计图的一般属性（如标题文字样式、柱状图形状等）需要保持一致，在此把共有属性放在一起，便于统一样式控制。个别不一样的样式在参数或者相应的初始化函数中单独设置处理：

//Echarts统计图共有options设置集合
var commonOpts = {
title: {
text: "",//正标题
x: "center", //标题水平方向位置
y: "top", //标题竖直方向位置
textStyle: {
fontSize: 18,
fontWeight: 'normal',
color: '#666'
}
},
legend: {
data: [{icon: 'circle'}],
bottom: 'bottom'
},
tooltipBarLine: { //柱状线状图
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
tooltipBar: { //柱状图
trigger: 'axis',//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
axisPointer: {
type: 'line'// 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {//统计表的上下空间
left: '5%',
right: '6%',
top: '60',
bottom: '15%', //60//若统计图x轴的label显示不全，则应加大该数值
containLabel: true
},
label: {
normal: {
show: true,//数据是否显示
position: 'top'//数据显示位置
}
},
textStyle: {
color: "#666" //字体颜色
},
axisLine: { //轴线设置
lineStyle: {
type: 'solid',
color: '#999',
width: 1
}
},
axisLabel: {//轴label设置
interval: 0,
// rotate:  30 , // 当标签过长时应设置为倾斜
textStyle: {
color: '#666'
}
},
series: { //柱状图 bar设置
barWidth: 30,//柱状条宽度
itemStyle: {
emphasis: 30,
normal: {
show: true,//鼠标悬停时显示label数据
barBorderRadius: [10, 10, 10, 10]//柱形图圆角，初始化效果
// color: '#2196f3'
}
},
label: {
normal: {
show: true, //显示数据
position: 'top', //显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
textStyle: {
// color: '#BOBOBO' //显示数据的颜色
}
}
}
}
};

具体demo代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style>
.section {
width: 915px;
border: 1px solid #ccc;
}
.chart {
width: 810px;
height: 400px;
}

</style>
</head>
<body style="height: 100%; margin: 0">
<div class="section">
<div class="chart" id="stackChart"></div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/echarts.min.js"></script&g
4000
t;
<script>

renderStackBar();

function renderStackBar() {
var axisLabel = ["政治 历史 生物", "政治 物理 生物", "政治 地理 生物", "政治 历史 物理","政治 历史 地理", "历史 物理 生物", "政治 历史 化学", "历史 地理 生物", "政治 地理 物理"];
var seriesData = [];

for (var i = 0; i < 5; i++) {
var singleData = [];
for(var j = 0; j < axisLabel.length; j++){
singleData.push(Math.floor(Math.random() * 100));
}
seriesData.push(singleData);
}

initChartStackedBar('stackChart', axisLabel, seriesData);
}

/**
* 初始化堆叠柱状图
* @param domeId 统计图dom容器id
* @param axisLabel 轴label
* @param seriesData series data值 - 数组
*/
function initChartStackedBar(domeId, axisLabel, seriesData) {
var myChart = echarts.init(document.getElementById(domeId));
var stackColorList = ['#FBB730', '#97ddff', '#60d8e8', '#755FEE', '#6197fb'];
var seriesValue = [];
var legendList = [];
var len = seriesData.length;

for (var g = 0; g < len; g++) {
legendList.push("兴趣第" + Number(g + 1) + "位人数");
var serieObj = {
name: legendList[g],
type: 'bar',
stack: '总量',
barWidth: 50,
label: {
normal: {
show: true,//显示数据
position: 'insideLeft'
}
},
data: seriesData[g],
itemStyle: {
normal: {
color: stackColorList[g]
}/*,
emphasis: commonOpts.series.itemStyle.emphasis*/
}
};
seriesValue.push(serieObj);
}

var option = {
title: commonOpts.title,
tooltip: commonOpts.tooltipBar,
legend: {
data: legendList,
y: 'bottom'
},
grid: commonOpts.grid,
yAxis: {
type: 'value'
},
xAxis: {
type: 'category',
data: axisLabel,
axisLabel: commonOpts.axisLabel
},
series: seriesValue
};
if (option && typeof option === "object") {
option.xAxis.axisLabel.rotate = 30;
option.title.text = '6选3学科组合兴趣前5位的学生集中度';
myChart.setOption(option, true);
}
}

</script>
</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图形 echarts3-0

相关文章推荐

新的分享

章节导航