开发者社区> 问答> 正文

echarts折线图/柱状图横屏显示时,label数值怎么打横显示? :报错

@Kener-林峰 echarts折线图/柱状图横屏显示时,红色框部分的label文字应该怎么旋转90度显示,就跟x轴上的数值一样,打横显示,跪求解决方案,api已经看过,针对柱状图/折线图给series里itemStyle中的label设置rotate:90无效。


//横向折线图
var optionX = {
	tooltip:{
	        show:true
	},
	grid: {
                x: '5%',
                x2: '5%',
                y: '8%',
                y2: '5%',
                containLabel: true
        },
	legend:{
		data:['今年','去年'],
		x: '30px',
		y: 'bottom'
	},
	xAxis:[{
		type:'value',
		show:true,
		position:'top',
		axisLabel:{
    		show: true,
    		rotate:-90,
    		formatter:'{value}',
		textStyle :{
                    fontSize : '22px',
                    fontFamily : '微软雅黑'
                }
    	},
	axisLine:{
                lineStyle:{
                    color:'#CDCDCD'
                }
    	},
    	min:2300,
	max:4500,
	splitNumber:22,
    	splitLine:{
             show:true
       }
	}],
	yAxis:[{
		type:'category',
		show:true,
		boundaryGap: false,
data:["9-1","9-2","9-3","9-4","9-5","9-6","9-7","9-8","9-9","9-10","9-11","9-12","9-13","9-14","9-15"].reverse(),
		axisLine:{
                      lineStyle:{
                      color:'#CDCDCD'
                }
    	},
    	axisLabel:{
		rotate:-90,
		show: true,
		interval:0
	},
	axisTick: {
    		show:false
    	},
	splitLine:{
             show:true
      }
	}],
	series:[
	{
		name:'今年',
		type:'line',
		symbol:'none',
		itemStyle:{
			normal:{
				label : {
                                   rotate:-90,
					show: true,
					textStyle:{
						color:'#FD211E'
					}
				},
				lineStyle:{
					color:'#FD211E'
				}
			}
		},
		data:[3000,2600,3800,3400,3300,3700,2800,3200,3040,2850,2950,4500,3200,3100,2900].reverse()
	},{
		name:'去年',
		type:'line',
		symbol:'none',
		itemStyle:{
			normal:{
				label : {
                                   rotate:-90,
					show: true,
					textStyle:{
						color:'#1790FE'
					}
				},
				lineStyle:{
					color:'#1790FE'
				}
			}
		},
		data:[3000,2900,2780,2660,2500,3250,3900,2300,3100,2860,2900,3700,4500,3200,3100].reverse()
	}]
};




展开
收起
kun坤 2020-06-14 06:46:16 1583 0
1 条回答
写回答
取消 提交回答
  • 哪位走过路过的好心人,帮忙解答解惑~######

    我也遇到了一模一样的问题,你的这个问题后面解决了吗?求助

    2020-06-14 06:46:24
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载