zoukankan      html  css  js  c++  java
  • 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'
                }
            }
        ]
    };
  • 相关阅读:
    HNUSTOJ-1675 Morse Code(DFS+字典序搜索)
    HNUSTOJ-1638 遍地桔子(贪心)
    HNUSTOJ-1521 塔防游戏
    HNUSTOJ-1565 Vampire Numbers(暴力打表)
    HDUSTOJ-1559 Vive la Difference!(简单题)
    HDUSTOJ-1558 Flooring Tiles(反素数)
    HNUSTOJ-1600 BCD时钟
    胡雪岩04
    新概念4-24
    曾国藩家训02
  • 原文地址:https://www.cnblogs.com/qtx-/p/11735722.html
Copyright © 2011-2022 走看看