echarts中设置柱状图(条形图)为横向展示-每条线上不同颜色

效果图 

效果代码 

option = {
            textStyle: {
                // fontSize: arr.initHeight,
                color: 'black'//字体颜色
            },
            tooltip: {
                trigger: "axis",
                textStyle: {
                    // fontSize: arr.initHeight,
                    color: 'black',//字体颜色
                },
                        //   formatter: function (params) {
                        //      return params[0].name + ': ' + params[0].value+"%";
                        //   },
            },
            yAxis: {
                data: ['六分公司', '五分公司', '四分公司', '三分公司', "二分公司"],
                axisTick: {       //x轴刻度线
                    show: false
                },
                splitLine: {     //网格线
                    show: false
                },
                axisLine: {    //坐标轴线
                    show: false
                },
            axisLabel:{ //调整文字倾斜角度和颜色
                interval:0,
                rotate:45,
                margin:2,
                textStyle:{
                color:"#222"
                }
            },

            },
            xAxis: {
                show: false,
                max: 100,
                min: 0,
            },
            grid: {
                left: '0%',
                right: '15%',
                bottom: '40%',
                // top:"300%",
                containLabel: true
            },
			tooltip: {
				// 悬停指示
				trigger: "item",
				formatter: "{b}: {c}%"
			},
            series: [{
                name: '收缴率',
                type: 'bar',
                stack: '使用情况',
                data: [100, 88.3, 90.5, 95.6, 98.6],
                barWidth: 10,//柱图宽度
                itemStyle: {
                    barBorderRadius: [50, 50, 50, 50] // 统一设置四个角的圆角大小
                },
                //标签
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{c}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                    },
                },
                itemStyle: {
					barBorderRadius: [50, 0, 0, 50], // 统一设置四个角的圆角大小
                    normal: {
                        //这里是重点
                        color: function (params) {
                            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                            var colorList = ['#00F4FF', '#0092FF', '#0061FE', '#002099', '#000682'];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                markPoint: {
                    symbol: 'pin',//标记类型
                    symbolSize: 10,//图形大小
                    itemStyle: {
                        normal: {
                            borderColor: 'green',
                            borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                            label: {
                                show: true,
                                fontSize: 14
                            }
                        }
                    },
                }
            },
            {
                name: '',
                type: 'bar',
                stack: '使用情况',
                // data: [100, 100, 100, 100, 100],
                itemStyle: {
                    barBorderRadius: [0, 50, 50, 0],// 统一设置四个角的圆角大小
                    normal: {
                        //这里是重点
                        color: function (params) {
                            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                            //var colorList = ['#00F4FF', '#0092FF', '#0061FE', '#002099', '#000682'];
							var colorList = ['rgba(255,0,0,.1)','rgba(255,0,0,.1)','rgba(255,0,0,.1)','rgba(255,0,0,.1)','rgba(255,0,0,.1)'];
                            return colorList[params.dataIndex]
                        }
                    }
                },
            }
            ]
        };

option = {
            textStyle: {
                // fontSize: arr.initHeight,
                color: 'black'//字体颜色
            },
            tooltip: {
                trigger: "axis",
                textStyle: {
                    // fontSize: arr.initHeight,
                    color: 'black',//字体颜色
                },
                        //   formatter: function (params) {
                        //      return params[0].name + ': ' + params[0].value+"%";
                        //   },
            },
            yAxis: {
                data: ['五分公司', '四分公司', '三分公司', '二分公司', "一分公司"],
                axisTick: {       //x轴刻度线
                    show: false
                },
                splitLine: {     //网格线
                    show: false
                },
                axisLine: {    //坐标轴线
                    show: false
                }

            },
            xAxis: {
                show: false,
                max: 100,
                min: 0,
            },
            grid: {
                left: '0%',
                right: '15%',
                bottom: '40%',
                // top:"300%",
                containLabel: true
            },
			tooltip: {
				// 悬停指示
				trigger: "item",
				formatter: "{b}: {c}%"
			},
            series: [{
                name: '收缴率',
                type: 'bar',
                stack: '使用情况',
                data: [100, 88.3, 90.5, 95.6, 98.6],
                barWidth: 10,//柱图宽度
                itemStyle: {
                    barBorderRadius: [50, 50, 50, 50] // 统一设置四个角的圆角大小
                },
                
                //标签
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{c}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                    },
                },
                itemStyle: {
					barBorderRadius: [50, 0, 0, 50], // 统一设置四个角的圆角大小
                    normal: {
                        //这里是重点
                        color: function (params) {
                            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                            var colorList = ['#00F4FF', '#0092FF', '#0061FE', '#002099', '#000682'];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                markPoint: {
                    symbol: 'pin',//标记类型
                    symbolSize: 10,//图形大小
                    itemStyle: {
                        normal: {
                            borderColor: 'green',
                            borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                            label: {
                                show: true,
                                fontSize: 14
                            }
                        }
                    },
                }
            },
            {
                name: '',
                type: 'bar',
                stack: '使用情况',
                // data: [100, 88.3, 90.5, 95.6, 98.6],//设置数值下的阴影
                itemStyle: {
                    barBorderRadius: [0, 50, 50, 0],// 统一设置四个角的圆角大小
                    normal: {
                        //这里是重点
                        color: function (params) {
                            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                            //var colorList = ['#00F4FF', '#0092FF', '#0061FE', '#002099', '#000682'];
							var colorList = ['rgba(255,0,0,.1)','rgba(255,0,0,.1)','rgba(255,0,0,.1)','rgba(255,0,0,.1)','rgba(255,0,0,.1)'];
                            return colorList[params.dataIndex]
                        }
                    }
                },
            }
            ]
        };