效果圖：

?

?代碼如下：

option = {legend: {},tooltip: {},dataset: {source: [['product', '2015', '2016', '2017'],['first', 43.3, 85.8, 93.7],['second', 83.1, 73.4, 55.1],['third', 86.4, 65.2, 82.5],['fourth', 72.4, 53.9, 39.1]]},xAxis: { type: 'category' },yAxis: {},series: [{ type: 'bar',barGap:'30%', //柱子之間的間隔itemStyle: {// 柱子顯示時的顏色color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{ offset: 0, color: '#83bff6' },{ offset: 0.5, color: '#188df0' },{ offset: 1, color: '#188df0' }]),//設置柱形圖圓角 [左上角，右上角，右下角，左下角]barBorderRadius:[8, 8, 0, 0]},emphasis: {itemStyle: {// 鼠標經過時柱子的顏色color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#2378f7' },{ offset: 0.7, color: '#2378f7' },{ offset: 1, color: '#83bff6' }])}},}, { type: 'bar',color:'#FDBF5E' }, { type: 'bar',color:'#66D3AE' }] };

總結

以上是生活随笔為你收集整理的柱状图柱子间隔和圆角及渐变色设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。