Echarts常见问题

726 阅读1分钟

1.bar图x轴显示数值,y轴显示文本

正常的x轴显示文本,y轴显示数值,xAxis中的type为category,存放文本的data数组放在yAxis中, 而y轴显示文本,x轴显示数值,只需要将xAxis中的type改为value,yAxis中的type改为category,data数组放在yAxis中。


        xAxis : [  
            {  
                type : 'value',  
            }  
        ],  
        yAxis : [  
            {  
                type : 'category',
		data : ["科员","副科级","中华人民共和国正科级","副处级","处级"],
            }  

    ]

这种情况下如果文本太长显示不全,可将y轴向右移动,使文本可显示的区域变大,调整grid的x属性(x,y为echarts图左上角那个点,x2,y2为右下角那个点)


	grid:{
		x:150,
	},

img

2.去掉饼图外面的圆环

pie图外面有个圆环,有时感觉不好看想去掉,将calculable配置项删除或赋值为false均可。

img
下面这个图是官网的带圆环的图。
img

3.x轴文本太长显示不全

修改xAxis,axisLabel下的rotate值,旋转文字的显示方向,若还是显示不下,调整grid的y2配置项,使echarts右下角绘制的原点向上移。

img
img
4.tooltip显示的特别大 类似下图这种情况,这种情况是将这个echarts图所在的div的宽高样式写在了css文件或页面head部分的style样式中了,解决方法是将div的样式直接写成内联样式(将其它地方这个div对应的样式里面的宽高去掉),如

<div id="echarts1" style="width:50%;height:300px;"></div>

img