柱状图echarts 柱状配置项内容和展示

4.7版本有bug,backgroundStyle的barBorderRadius不生效。官方已做修改,但未发布可用的正式版。

配置项如下
      option = {
    backgroundColor: "#fff",
    tooltip: {
        position: 'top',
        backgroundColor: '#16324F',
        //   trigger: 'axis',
        formatter(params) {
            const marker = '<span style="display:inline-block;margin-right:5px;margin-bottom:3px;border-radius:10px;width:5px;height:5px;background-color:#2FC25B;"></span>'
            return marker + params.value + '个'
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
            show: false //不显示坐标轴刻度线
        },
        axisLine: {
            show: false, //不显示坐标轴线
        },
        axisLabel: {
            show: true, //不显示坐标轴上的文字
        },

    },
    yAxis: {
        type: 'value',
        "axisLine": { //y轴
            "show": false
        },
        "axisTick": { //y轴刻度线
            "show": false
        },
        "splitLine": { //网格线
            "show": false
        },
        axisLabel: {
            show: false, //不显示坐标轴上的文字
        },
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 15,
        showBackground: true,
        backgroundStyle: {
            // 官方bug,待解决
            barBorderRadius: 8,
            // borderWidth: 0,
            // borderColor:'#293c55',
            // borderType:'solid',
            color: '#f5f5f5',
        },
        //背景色
        itemStyle: {
            normal: {
                color: '#46c7dc',
                barBorderRadius: 8,
            },
        },
        //显示文字
        label: {
            normal: {
                show: false,
                position: 'insideTop'

            }
        }

    }]
};
    
截图如下