echars 横向柱状图记录

let myChart = echarts.init(document.getElementById(id));
    //初始化数据
    let category = ["测试", "测试2", "测试3","测试4", "测试5", "测试6"];
    let barData =  [21, 12, 15,2, 6, 28];
    let dataShadow = [];
    for (let i = 0; i < barData.length; i++) {
        dataShadow.push(barData[i])
    }
    var maxdataShadow=[]
    for (let i = 0; i < barData.length; i++) {
        maxdataShadow.push(barData[barData.length-1])
    }

    let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '20%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                boundaryGap: ['0%', '20%'],//留白大小，坐标轴两边留白
            },
            yAxis: {
                type: 'category',
                data: category,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                },
                offset: 10,
                nameTextStyle: {
                    fontSize: 15
                },
                splitLine: {
                    show: false
                },
                data: category
            },

            series: [{ // For shadow
                name: '数量',
                type: 'bar',
                label: {
                    normal: {
                        show: false,
                        position: 'right',
                        distance: 10,
                        color: 'white',
                    }
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: 'rgb(43,82,226)'
                    },
                    emphasis: {
                        barBorderRadius: 20
                    },

                },
                barGap: '-100%',
                barCategoryGap: '70%',
                data: dataShadow,

            },// 背景条1为白色，为了让数据显示在最右边
                {
                    type: 'bar',
                    barWidth: 12,
                    silent: true,
                    itemStyle: {
                        normal: { color: '#DDDDDD', barBorderRadius: 45 }
                    },
                    barGap: '-100%', // 可以使两个条重叠
                    barCategoryGap: '70%',
                    data: maxdataShadow,
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            distance: 10,
                            color:'#white',
                            formatter: function(data) {
                                return dataShadow[data.dataIndex];
                            },
                        }
                    }
                },// 背景条2覆盖第一个白背景，只剩下数据在右边
                {
                    type: 'bar',
                    barWidth: 12,
                    silent: true,
                    itemStyle: {
                        normal: { color: '#003363', barBorderRadius: 45 }
                    },
                    barGap: '-100%', // 可以使两个条重叠
                    barCategoryGap: '30%',
                    data: maxdataShadow,
                },
                {
                    type: 'bar',
                    data: barData,
                    smooth: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'left',
                            distance: 10,

                            textStyle: {
                                color: '#FFF',
                                fontSize: 12
                            },
                            formatter: function (param) {
                                for (let i = 0; i < category.length; i++) {
                                    if (param.dataIndex == i) {
                                        return category[i];
                                    }
                                }
                            }
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            barBorderRadius: 40
                        },
                        normal: {
                            barBorderRadius: 20,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(12,81,226)'
                            }, {
                                offset: 1,
                                color: '#3fa7dc'
                            }]),

                        }
                    }
                }
            ]
        };
    myChart.setOption(option);

 效果图如下