图表中的圆角条

Question

有没有办法在 ECharts 图表中使条形四舍五入，例如这里的例子？

Answer 1

为了更精细地控制哪个角被多少 - 可以使用borderRadius。

borderRadius: 5, // consistently set the size of 4 rounded corners
borderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)

// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));
// Specify the configuration items and data for the chart
var option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E'],
},
yAxis: {},
series: [
{
type: 'bar',
data: [
10,
22,
28,
{
value: 43,
itemStyle: {
color: '#91cc75',
shadowColor: '#91cc75',
borderType: 'dashed',
opacity: 0.5,
},
},
49,
],
itemStyle: {
borderRadius : [50, 50, 0, 0], // Specify the border radius
borderType: 'solid',
borderColor: '#73c0de',
shadowColor: '#5470c6',
shadowBlur: 3,
},
},
],
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);

下面是一个工作示例：https://stackblitz.com/edit/js-7rkahr?file=index.js

文档：https://echarts.apache.org/en/option.html#series-bar.itemStyle.borderRadius

Answer 2

使用roundCap:true

例

series: [{
type: 'bar',
data: [4, 3, 2, 1, 0],
coordinateSystem: 'polar',
name: 'Without Round Cap',
color: 'rgba(200, 0, 0, 0.5)',
itemStyle: {
borderColor: 'red',
borderWidth: 1
}
}, {
type: 'bar',
data: [4, 3, 2, 1, 0],
coordinateSystem: 'polar',
name: 'With Round Cap',
roundCap: true,
color: 'rgba(0, 200, 0, 0.5)',
itemStyle: {
borderColor: 'green',
borderWidth: 1
}
}],

Answer 3

您需要在该代码中添加 css。

如何在 css 中使进度条的角变圆

我在这里找到解决方案，它将为您工作。