首页 > 其他 > 详细

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

时间:2019-10-25 00:05:10      阅读:1442      评论:0      收藏:0      [点我收藏+]

完整代码如下:

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‘
            }
        }
    ]
};

 

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

原文:https://www.cnblogs.com/qtx-/p/11735722.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!