echarts 排行榜样式实现 - Go语言中文社区

echarts 排行榜样式实现


var labelSetting = {
    normal: {
        show: true,
        position: 'right',
        offset: [10, 0],
        textStyle: {
            fontSize: 16
        }
    }
};
var maxData=200000
var option = {
     title: {
        text: '中国苹果汁出口贸易数据'
    },
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
        ]
    },
    grid: {containLabel: true},
    xAxis: {name: 'amount',splitLine: {show: false},axisLine: {show: false},axisTick: {show: false}, axisLabel: {show: false},},
    yAxis: {type: 'category',axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            margin: 10,
            textStyle: {
                color: '#999',
                fontSize: 16
            }
        }},

    series: [
        {
            type: 'pictorialBar',
            label: labelSetting,
            symbol: 'rect',
            itemStyle: {
            
            normal: {
                color: '#007eb1',
                
            }
        },
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            },
            z:10
            
        },
        {
        // full data
        type: 'pictorialBar',
        itemStyle: {
            
            normal: {
                color: '#7dbad2',
                opacity: 0.2
            }
        },
       /* symbolRepeat: 'fixed',*/
/*        symbolMargin: '5%',
*/      symbol: 'rect',
/*        symbolSize: 30,*/
        symbolBoundingData: maxData,
        encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            },
        z: 5
    }
    ]
};

效果展示图:

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/u012211422/article/details/93377698
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-08-27 21:32:54
  • 阅读 ( 2629 )
  • 分类:

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢