一、使用echarts图形属性borderRadius实现单一柱状图的圆角效果
在使用echarts绘制柱状图的时候，通过设置图形对象的borderRadius属性，可以实现某一个柱状图的圆角效果。该属性值支持传入单个数值、两个数值以及四个数值。
以下是单个数值的示例代码：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
borderRadius: 5 // 设置单个数值
}
}]
};
以下是两个数值的示例代码：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
borderRadius: [10, 10, 0, 0] // 设置两个数值
}
}]
};
以下是四个数值的示例代码：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
borderRadius: [10, 10, 0, 0, 0, 0, 10, 10] // 设置四个数值
}
}]
};
二、使用echarts图形属性borderRadius实现全局柱状图的圆角效果
如果想要全局设置柱状图的圆角效果，只需要将borderRadius属性设置在全局样式中，而不是单独为某一个柱状图设置。该属性值同样支持传入单个数值、两个数值以及四个数值。
以下是单个数值的示例代码：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}],
itemStyle: {
borderRadius: 5 // 设置单个数值
}
};
以下是两个数值的示例代码：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}],
itemStyle: {
borderRadius: [10, 10, 0, 0] // 设置两个数值
}
};
以下是四个数值的示例代码：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}],
itemStyle: {
borderRadius: [10, 10, 0, 0, 0, 0, 10, 10] // 设置四个数值
}
};
三、使用CSS样式属性border-radius实现全局柱状图的圆角效果
另外一种方式是通过在CSS样式中设置border-radius属性来实现全局的柱状图圆角效果。
以下是CSS样式的示例代码：
.echarts_container .echarts {
border-radius: 5px;
}原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/237972.html
微信扫一扫 
支付宝扫一扫 