84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
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位置进行设置。