英文:
Rounded bars in echarts
问题
有没有办法使ECharts图表中的柱形图变成圆角，就像这个示例中的样子？
英文:
Is there are way to make the bars rounded in an ECharts chart such as the example here?
答案1
得分: 4
以下是已经翻译好的部分：
有关控制每个角的圆角程度的更精细控制 - 可以使用borderRadius。
borderRadius: 5, // 一致地设置4个角的大小
borderRadius: [5, 5, 0, 0] // (顺时针方向上左角、上右角、下右角和下左角)
// 根据准备好的DOM初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
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], // 指定边框半径
borderType: 'solid',
borderColor: '#73c0de',
shadowColor: '#5470c6',
shadowBlur: 3,
},
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
这是一个可运行的示例：https://stackblitz.com/edit/js-7rkahr?file=index.js
文档链接：https://echarts.apache.org/en/option.html#series-bar.itemStyle.borderRadius
英文:
For more granual control for which corner is rouned by how much - borderRadius can be used.
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);
Here is a working example: https://stackblitz.com/edit/js-7rkahr?file=index.js
Docs: https://echarts.apache.org/en/option.html#series-bar.itemStyle.borderRadius
答案2
得分: 2
使用 roundCap:true
series: [{
type: 'bar',
data: [4, 3, 2, 1, 0],
coordinateSystem: 'polar',
name: '无圆头',
color: 'rgba(200, 0, 0, 0.5)',
itemStyle: {
borderColor: '红色',
borderWidth: 1
}
}, {
type: 'bar',
data: [4, 3, 2, 1, 0],
coordinateSystem: 'polar',
name: '有圆头',
roundCap: true,
color: 'rgba(0, 200, 0, 0.5)',
itemStyle: {
borderColor: '绿色',
borderWidth: 1
}
}],
英文:
Use 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
}
}],
答案3
得分: -3
你需要在那段代码中添加CSS。
https://stackoverflow.com/questions/29205562/how-to-make-corners-of-progress-bar-round-in-css
我在这里找到了解决方案，它将适用于你。
英文:
You need to added css in that code.
https://stackoverflow.com/questions/29205562/how-to-make-corners-of-progress-bar-round-in-css
I find solution here and it will works for you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论