• echarts的dataset实现的横向柱状图,文字、柱状上下排列


    完整代码如下:

    option = {
        dataset: {
            source: [
                ['product', 'nums'],
                ['Linux 7.x', 100],
                ['Linux 6.6.x', 200],
                ['Windows7', 120],
                ['Windows10', 240]
            ]
        },
        color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'],
        grid: {
            left: '4%',
            top: 'center',
            right: '1%',
            containLabel: true
        },
        xAxis: [{
                show: false,
            },
            {
                show: false,
            }
        ],
        yAxis: {
            type: 'category',
            inverse: true,
            show: false
        },
    
        series: [
            //亮色条 百分比
            {
                show: true,
                type: 'bar',
                barGap: '-100%',
                barWidth: '20%',
                z: 2,
                color: function(params) {
                    // build a color map as your need.
                    var colorList = [
                        '#d74e67', '#0092ff', '#eba954', '#21b6b9', '#60a900', '#01949b', ' #f17677'
                    ];
                    return colorList[params.dataIndex]
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 10,
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#000',
                            fontSize: 25,
                            fontWeight: 'bold'
                        },
                        position: 'right'
                    }
                },
                encode: {
                    x: 'nums'
                }
            },
            //年份
            {
                show: true,
                type: 'bar',
                xAxisIndex: 1, //代表使用第二个X轴刻度
                barGap: '-100%',
                barWidth: '10%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 200,
                        color: 'transparent'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: [0, '-20'],
                        formatter: '{b}',
                        textStyle: {
                            fontSize: 14,
                            color: '#333',
                        }
                    }
                },
                encode: {
                    y: 'product'
                }
            }
        ]
    };
  • 相关阅读:
    java 无符号byte转换
    MySQL分区总结
    eclipse @override注解出错
    git 利用hook 实现服务器自动更新代码
    Centos 安装mysql
    Centos Python3安装共存
    chromedriver 代理设置(账号密码)
    PyQt5整体介绍
    python图片云
    PyPt5 浏览器实例
  • 原文地址:https://www.cnblogs.com/qtx-/p/11735722.html
Copyright © 2020-2023  润新知