echarts实现颜色渐变的横向柱状图(包括自定义各种配置项的属性)

实现效果图:

echarts实现颜色渐变的横向柱状图(包括自定义各种配置项的属性)_第1张图片

实现代码:

option = {
    title: {
        show: true,
        text: '单位(%)',
        x: 500,
        y: 20,
        textStyle: {
            color: '#000',
            fontSize: 20
        }
    },
    tooltip: {
        trigger: 'axis',
        textStyle: {
            fontSize: 18
        }
    },
    legend: {
        show: false,
        data: ['比例']
    },
    toolbox: {
        show: false,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    xAxis: [{
        show: false,
        type: 'value',
        boundaryGap: [0, 0.01]
    }],
    yAxis: [{
        type: 'category',
        axisLabel: {
            show: true,
            textStyle: {
                color: '#000',
                fontSize: '18'
            }
        },
        data: ['50000', '40000', '30000', '20000', '10000']
    }],
    series: [{
        name: '比例',
        type: 'bar',
        barWidth: 20,
        data: [17, 19, 21, 70, 85],
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#000',
                        fontSize: 20
                    }
                },
                barBorderColor: '#0C98BA',
                barBorderRadius: [10, 10, 10, 10],
                barBorderWidth: 1,
                //颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#0C98BA'
                },
                {
                    offset: 0.8,
                    color: '#ffffff'
                }])
            }
        }
    }]
};

 

你可能感兴趣的:(echarts实现颜色渐变的横向柱状图(包括自定义各种配置项的属性))