Echarts柱状图圆角设置详解
一、Echarts柱状图x轴圆环
Echarts柱状图在默认情况下，并没有给x轴添加圆角，但是可以通过设置x轴轴线形状为圆角，在一定程度上实现x轴圆环的效果。
option = {
xAxis: {
axisLine: {
lineStyle: {
type: "round"
}
}
},
yAxis: {...},
series: {...}
};
在上述代码中只需要将xAxis的axisLine设置为type为"round"即可。
二、Echarts柱状图高度设置
如果柱状图的高度太小，可能会影响图表的美观度，可以通过设置柱状图的高度，调整柱状图的大小。
option = {
xAxis: {...},
yAxis: {...},
series: [
{
type: "bar",
barWidth: 50, // 设置柱状图的宽度
barGap: "30%", // 设置柱状图之间的间距
itemStyle: {
normal: {
barBorderRadius: 20 // 设置圆角半径
}
},
data: [10, 20, 30, 40, 50, 60]
}
]
};
三、Echarts柱状图边框设置
通过设置柱状图的边框，可以为柱状图添加细节，提升图表的美观程度。
option = {
xAxis: {...},
yAxis: {...},
series: [
{
type: "bar",
barWidth: 50, // 设置柱状图的宽度
barGap: "30%", // 设置柱状图之间的间距
itemStyle: {
normal: {
barBorderRadius: 20, // 设置圆角半径
borderColor: "#000", // 设置边框颜色
borderWidth: 2 // 设置边框宽度
}
},
data: [10, 20, 30, 40, 50, 60]
}
]
};
四、Echarts柱状图位置设置
柱状图的位置有多种设置方式，例如可以设置为左对齐、右对齐、居中对齐等等。
option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisLabel: {
interval: 0,
rotate: 30
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
type: "value",
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
series: [
{
type: "bar",
barWidth: "30%",
itemStyle: {
normal: {
barBorderRadius: 20, // 设置圆角半径
color: "#1890ff" // 设置柱状图颜色
}
},
data: [10, 20, 30, 40, 50, 60, 80],
barCategoryGap: "50%", // 设置柱状图之间的间距
barMinHeight: 10 // 设置最小高度，避免柱状图过小
}
]
};
五、Echarts三角锥形柱状图
除了普通的柱状图外，还可以使用三角锥形柱状图，通过设置type为"pictorialBar"，并且特殊指定symbol为"triangle"，即可实现三角锥形柱状图的效果。
option = {
xAxis: {...},
yAxis: {...},
series: [
{
type: "pictorialBar",
barWidth: 50, // 设置柱状图的宽度
barGap: "30%", // 设置柱状图之间的间距
itemStyle: {
normal: {
barBorderRadius: 20, // 设置圆角半径
borderColor: "#000", // 设置边框颜色
borderWidth: 2, // 设置边框宽度
opacity: 0.7 // 设置柱状图透明度
}
},
symbolRepeat: true,
symbolSize: [10, 20], // 设置三角锥形的尺寸
symbolOffset: [0, -5], // 设置三角锥形的偏移量
symbolBoundingData: 200, // 设置三角锥形的边界
symbolMargin: "10%",
symbol: "triangle",
data: [10, 20, 30, 40, 50, 60, 70, 80]
}
]
};
六、Echarts柱状图宽度设置
柱状图的宽度也可以根据需求进行设置，可以通过调整barWidth的值来实现柱状图宽度的调整。
option = {
xAxis: {...},
yAxis: {...},
series: [
{
type: "bar",
barWidth: 50, // 设置柱状图的宽度
barGap: "30%", // 设置柱状图之间的间距
itemStyle: {
normal: {
barBorderRadius: 20, // 设置圆角半径
borderColor: "#000", // 设置边框颜色
borderWidth: 2 // 设置边框宽度
}
},
data: [10, 20, 30, 40, 50, 60]
}
]
};
七、Echarts柱状图刻度设置
柱状图的刻度也是一个重要的细节，可以通过修改轴线的刻度值，实现刻度的更改。
option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisLabel: {
interval: 0,
rotate: 30
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
type: "value",
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
formatter: "{value}%"
}
},
series: [
{
type: "bar",
barWidth: "30%",
itemStyle: {
normal: {
barBorderRadius: 20, // 设置圆角半径
color: "#1890ff" // 设置柱状图颜色
}
},
data: [10, 20, 30, 40, 50, 60, 80],
barCategoryGap: "50%", // 设置柱状图之间的间距
barMinHeight: 10 // 设置最小高度，避免柱状图过小
}
]
};
八、Echarts柱状图圆角半圆
添加圆角或者半圆可以让柱状图更具有美观性，可以通过设置borderRadius属性实现。
option = {
xAxis: {...},
yAxis: {...},
series: [
{
type: "bar",
barWidth: 50, // 设置柱状图的宽度
barGap: "30%", // 设置柱状图之间的间距
itemStyle: {
normal: {
borderRadius: [10, 10, 0, 0], // 设置柱状图的圆角半径
borderColor: "#000", // 设置边框颜色
borderWidth: 2 // 设置边框宽度
}
},
data: [10, 20, 30, 40, 50, 60]
}
]
};
九、Echarts柱状图大小设置
通过设置grid属性，可以实现柱状图的大小设置，使用不同的top、left、right、bottom参数，可以调整柱状图所占用的位置。
option = {
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {...},
series: [
{
type: "bar",
barWidth: "60%",
data: [10, 20, 30, 40, 50, 60, 70],
itemStyle: {
normal: {
color: function(params) {
var colorList = [
"#C1232B","#B5C334","#FCCE10","#E87C25","#27727B",
"#FE8463","#9BCA63","#FAD860","#F3A43B","#60C0DD",
"#D7504B","#C6E579","#F4E001","#F0805A","#26C0C0"
];
return colorList[params.dataIndex];
},
barBorderRadius: 20 // 设置圆角半径
}
}
}
]
};
十、Echarts柱状图设置背景
为了美观性更佳，可以为图表添加一个渐变的背景色，增加趣味性。
option = {
xAxis: {...},
yAxis: {...},
series: [
{
type: "bar",
barWidth: 50, // 设置柱状图的宽度
barGap: "30%", // 设置柱状图之间的间距
itemStyle: {
normal: {
borderRadius: [10, 10, 0, 0], // 设置柱状图的圆角半径
borderColor: "#000", // 设置边框颜色
borderWidth: 2, // 设置边框宽度
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{offset: 0, color: "#00ffe8"},
{offset: 1, color: "#006bb0"}
]) // 设置渐变的颜色
}
},
data: [10, 20, 30, 40, 50, 60]
}
]
};
综上所述，以上就是关于Echarts柱状图设置圆角的多个方面的详细阐述，如x轴圆环、高度设置、边框设置、位置设置、三角锥形柱状图、宽度设置、刻度设置、圆角半圆和大小设置等等，从多个方面展示了如何为Echarts柱状图添加圆角，通过以上的内容可以看出，在Echarts中添加圆角并不难，只需要根据实际需求，选择合适的设置方式即可。
