echarts 的柱狀圖 填充色為透明


itemStyle控制柱形的樣式。如下:

itemStyle: {
normal: {
color: '#fff', //填充色
barBorderColor: '#4876FF', //邊框色
barBorderWidth: 3, //邊框寬度
barBorderRadius:2, //圓角半徑
label : { //標簽顯示位置
show: true,
position: 'top' //insideTop 或者橫向的 insideLeft

}
}
}

例子:

 

option = {
title : {
text: '世界人口總量',
subtext: '數據來自網絡'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['2011年', '2012年']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['巴西','印尼','美國','印度','中國','世界人口(萬)']
}
],
series : [
{
name:'2011年',
type:'bar',
itemStyle: {
normal: {
color: '#fff',
barBorderColor: '#4876FF',
barBorderWidth: 3,
barBorderRadius:2,
label : {
show: true,
position: 'insideLeft'

}
}
},
data:[18203, 23489, 29034, 104970, 131744, 630230]
},
{
name:'2012年',
type:'bar',
itemStyle: {
normal: {
color: '#fff',
barBorderColor: '#4876FF',
barBorderWidth: 3,
barBorderRadius:2,
label : {
show: true,
position: 'top'

}
}
},
data:[19325, 23438, 31000, 121594, 134141, 681807]
}
]
};


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM