echarts横向柱状图Demo

echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM

代码:

option = {
    backgroundColor: 'black',
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255,255,255,0.8)',
        extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
        textStyle: {
            color: '#6a717b',
        },

    },
    grid: {
        top: '0.5%',
        left: '3%',
        right: '11%',
        bottom: '2.5%',
        containLabel: true
    },
    yAxis: [{
        type: 'category',
        data: ['a', 'b', 'c', 'd', 'e', 'f', 'g3', 'h', 'i', 'j'],
        inverse: true,
        axisTick: {
            alignWithLabel: true,


        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 18,
                color: 'white'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#2548ac'
            }
        },

    }],
    xAxis: [{
        type: 'value',
        axisLabel: {
            margin: 10,
            interval: 1, //横轴信息全部显示  
            rotate: -30, //-15度角倾斜显示  
            textStyle: {
                fontSize: 18,
                color: 'white',
            }
        },
        axisLine: {
            lineStyle: {
                color: '#192469'
            }
        },
        splitLine: {
            lineStyle: {
                color: '#17367c'
            }
        }
    }],
    series: [{
        name: 'Top 10',
        type: 'bar',
        barWidth: 26,
        data: [8827896, 7472072, 7433391, 7137253, 6382192, 5268842, 4827026, 3935701, 3875562, 3839609],
        label: {
            normal: {
                show: true,
                position: 'insideRight',
                textStyle: {
                    color: 'blue', //color of value
                    fontSize: 18,
                }
            }
        },
        itemStyle: {

            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#0590eb' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#08e3f1' // 100% 处的颜色
                }], false),
                barBorderRadius: [0, 15, 15, 0],
                shadowColor: 'rgba(0,0,0,0.1)',
                shadowBlur: 3,
                shadowOffsetY: 3
            }
        }
    }]
};

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值