84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
eCharts柱形图label文字过长时会出现重叠问题,有没有什么比较好的解决方法如图:
可以使用提示框组件tooltip,鼠标移动到柱子上显示一个数值的提示框tooltip
补充:或者你可以把柱子横着放
试试能不能设置倾斜
这个有两种情况处理,当后台返回数据时判断数据值最大最小值,对Y轴进行处理,比如max-y:15800,min-y:9800,即可让y轴刻度在min-1000~max+1000之间显示,基本可以确保数据显示分开。当有数据值相同时,可以对series.label.position属性进行设置,对每一组数据的label位置进行设置。
app.title = '堆叠柱状图'; option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'直接访问', type:'bar', label: { normal: { show: true, position: 'top' } }, data:[2200000, 1820000, 1910000, 2340000, 2900000, 3300000, 3100000] }, { name:'邮件营销', type:'bar', label: { normal: { show: true, position: 'insideTop', textStyle:{ color:'#ccc' } } }, data:[2200000, 1820000, 1910000, 2340000, 2900000, 3300000, 3100000] }, { name:'联盟广告', type:'bar', label: { normal: { show: true, position: 'top' } }, data:[2200000, 1820000, 1910000, 2340000, 2900000, 3300000, 3100000] } ] };
可以使用提示框组件tooltip,鼠标移动到柱子上显示一个数值的提示框
tooltip
补充:或者你可以把柱子横着放
试试能不能设置倾斜
这个有两种情况处理,当后台返回数据时判断数据值最大最小值,对Y轴进行处理,比如max-y:15800,min-y:9800,即可让y轴刻度在min-1000~max+1000之间显示,基本可以确保数据显示分开。当有数据值相同时,可以对series.label.position属性进行设置,对每一组数据的label位置进行设置。