一、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中添加圓角並不難，只需要根據實際需求，選擇合適的設置方式即可。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/248708.html
微信掃一掃 
支付寶掃一掃 