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

Echarts绘制横向柱状图(圆角+渐变)_第1张图片
圆角配置

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

你可能感兴趣的:(echarts,echarts,前端,javascript)