侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

echarts柱状图x轴文字太多如何解决?超出省略显示成点例子代码

2022-06-20 星期一 / 0 评论 / 0 点赞 / 92 阅读 / 1473 字

在前端开发任务中使用echarts柱状图时,会出现x轴某项文字太长了这种情况,那么echarts柱状图x轴文字太多如何解决?办法是超出省略显示成点就行效果图看下图所示,在x轴的axisLabel里加一个formatter函数,index等于3表示字数

在前端开发任务中使用echarts柱状图时,会出现x轴某项文字太长了这种情况,那么echarts柱状图x轴文字太多如何解决?办法是超出省略显示成点就行效果图看下图所示,在x轴的axisLabel里加一个formatter函数,index等于3表示字数为3个超出就显示成点。

echarts柱状图x轴文字太多如何解决

echarts柱状图x轴文字太多超出省略显示成点例子代码:

xAxis: {type: 'category',data: this.rows.xAxis,axisLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.1)'}},axisLabel: {interval:0,textStyle: {color: '#CCCCCC',fontSize:'12px'},//多出字可以省略显示成点formatter: function (params){var index = 3; //字数为3个超出就显示成点var newstr = '';for(var i = 0; i< params.length; i += index){var tmp = params.substring(i, i+index);newstr += tmp +'';}if( newstr.length > 3)return newstr.substring(0, 3) + '...';elsereturn '/n'+newstr;},},},

广告 广告

评论区