2021-03-31

Echarts绘制横向柱状图(圆角+渐变)

效果图

横向柱状图

遇到的坑

    注意: 不要使用官网目前最新版本 3.6.1 , 使用3.6.x版本都不能实现圆角效果.经过测试, 可以使用3.5.4的版本. 若使用3.x以下的版本将不能实现颜色渐变.

重要的配置

    横向显示

        将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示

        xAxis: [{

            type: 'value',

            axisLine: {

                show: false

            },

            axisTick: {

                show: false

            }

        }],

        yAxis: [{

            type: 'category',

            data: category,

            splitLine: {show: false},

            axisLine: {

                show: false

            },

            axisTick: {

                show: false

            },

            offset: 10,

            nameTextStyle: {

                fontSize: 15

            }

        }],

    圆角的配置

        设置series的属性, 设置barWidth , itemStyle的emphasis和normal的barBorderRadius即可实现圆角.

series: [

            {

                name: '数量',

                type: 'bar',

                data: barData,

                barWidth: 14,

                itemStyle: {

                    emphasis: {

                        barBorderRadius: 7

                    },

                    normal: {

                        barBorderRadius: 7

                    }

                }

    渐变的实现

        设置itemStyle的color为new echarts.graphic.LinearGradient()线性渐变即可. 这个API在官方文档里面都没找到, 经过测试前四个参数设置为0, 0, 1, 0可以从左到右渐变. 设置为0,0,0,1可以从上到下渐变. 第5个参数数组表示开始的颜色和结束的颜色.

                itemStyle: {

                    emphasis: {

                        barBorderRadius: 7

                    },

                    normal: {

                        barBorderRadius: 7,

                        color: new echarts.graphic.LinearGradient(

                            0, 0, 1, 0,

                            [

                                {offset: 0, color: '#3977E6'},

                                {offset: 1, color: '#37BBF8'}

                            ]

                        )

                    }

                }

示例代码

完整的示例代码: