echarts横向柱状图让Y轴的名字在柱状图上方展示

最新推荐文章于 2024-09-25 10:30:49 发布

Z_Xshan

最新推荐文章于 2024-09-25 10:30:49 发布

阅读量569

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Z_Gleng/article/details/141674852

版权

效果

代码

   myEcharts(){
             // 基于准备好的dom，初始化echarts实例
            this.myChart =  echarts.init(this.$refs.rankingList);
            // 指定图表的配置项和数据
            var option = {  
                title: {    },  
                tooltip: {  
                    trigger: 'axis',  
                    axisPointer: {  
                        type: 'shadow'  
                    }  
                },  
                legend: {  
                    data: ['数据']  
                },  
                grid: {  
                    top: '0',  
                    left: '3%',  
                    right: '4%',  
                    bottom: '3%',  
                    containLabel: true  
                },  
                xAxis: {  
                    type: 'value',  
                    boundaryGap: [0, 0.01] ,
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线  
                    },  
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },  
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },  
                    axisLabel: { // 控制坐标轴标签  
                        show: false // 
                    }  
                },  
                yAxis: {  
                    type: 'category',  
                    data: ['项目5', '项目4', '项目3', '项目2', '项目1'] ,
                  
                    axisLine: { // 控制坐标轴线  
                        show: false // 隐藏轴线
                    },  
                    axisTick: { // 控制刻度线  
                        show: false // 隐藏刻度线  
                    },  
                    splitLine: { // 控制网格线  
                        show: false // 隐藏网格线  
                    },  
                    axisLabel: { // 控制坐标轴标签  
                        show: true, 
                        inside: true,
                        interval: 0, //横轴信息全部显
                        splitNumber: 50,
                        textStyle: {
                            color: '#585858',
                            verticalAlign: 'bottom',
                            fontSize: 13,
                            align: 'left',
                            padding: [0, 0, 15, -5]
                        }
                    } 
                },  
                series: [  
                    {  
                        name: '数值',  
                        type: 'bar',  
                        stack: '总量',  
                        barWidth: 15, // 条形的宽度  
                       
                        label: {  
                            show: true,  
                            position: 'right'  
                        },  
                        itemStyle: {  
                            borderRadius: 4,
                        // 设置颜色为线性渐变  
                            color: function (params) {  
                            var startIndex = params.dataIndex % 5; //
                            var colors = [  
                                ['#B4B4B4', '#FFFFFF'], // 第三种渐变色  
                                ['#B4B4B4', '#FFFFFF'], // 第四种渐变色  
                                ['#6C88FC', '#FFFFFF'], // 第四种渐变色  
                                ['#FFB44D', '#FFFFFF'],  // 第二种渐变色  
                                ['#FF4D4D', '#FFFFFF'], // 第一种渐变色  
                            ];  
                            var startColor = colors[startIndex][0];  
                            var endColor = colors[startIndex][1];  
                            return new echarts.graphic.LinearGradient(  
                                1, 0, 0, 0, // 渐变方向从上到下  
                                [  
                                    {offset: 0, color: startColor},  
                                    {offset: 1, color: endColor}  
                                ],  
                                false // 是否为对象模式，这里用数组模式  
                            );  
                        },  
                    } ,
                        data: [120, 200, 150, 80, 70]  
                    }  
                ]  
            };  
            
            // 使用刚指定的配置项和数据显示图表。
            this.myChart .setOption(option);
        }

因为是在y轴名字在上方展示，看下面代码

 axisLabel: { // 控制坐标轴标签  
                        show: true, 
                        inside: true,
                        interval: 0, //横轴信息全部显
                        splitNumber: 50,
                        textStyle: {
                            color: '#585858',
                            verticalAlign: 'bottom',
                            fontSize: 13,
                            align: 'left',
                            padding: [0, 0, 15, -5]
                        }
                    }