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