echarts柱状图柱子背景半透明、柱子边框设置

echarts设置柱状图柱子半透明状态、设置柱子边框颜色具体实现步骤。

关键代码:

itemStyle: {
normal: {
color: 'rgba(255, 204, 0,.3)',//柱子颜色
borderColor: '#ffcc00'//边框颜色
}
}

效果预览:


完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
</head>
<body>
<div id="test" style="height: 500px;width: 100%;"></div>
<script>
var BarBOX1 = echarts.init(document.getElementById("test"));
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '背景',
type: 'bar',
data: [100, 100, 100, 100, 100, ],
itemStyle: {
normal: {
color: 'rgba(0, 255, 255,.3)',
borderColor: '#00ffff'
}
}
},
{
name: '背景2',
type: 'bar',
data: [100, 100, 100, 100, 100, ],
itemStyle: {
normal: {
color: 'rgba(255, 204, 0,.3)',
borderColor: '#ffcc00'
}
}
}
]
};
BarBOX1.setOption(option);
</script>
</body>
</html>

使用记录,echarts柱子半透明、设置柱子的边框色!

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!