您的位置:

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中添加圆角并不难,只需要根据实际需求,选择合适的设置方式即可。