
在echarts中遇到几个样式问题,现总结如下:
1、tooltip中样式中 值换行
在tooltip中修改加上一句代码
formatter: '{b0}: {c0}<br />'
示例如下:
tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' },formatter: '{b0}: {c0}<br />' }
最终效果:
2、X轴超过4个标题显示不完全
在xAxis中加上这段代码 鉴于字数长度过长,排版不够,这里设置了字数长度,多出的用省略号替代
axisLabel: { interval: 0, formatter: function(value) { /*return value.split("").join("\n");*/ if(value.length > 3) { return value.substring(0, 3) + ".."; } else { return value; } } }
示例如下:
xAxis: [{ type: 'category', data: ['承办总件次', '承办单位数', '独办', '分办', '主办'], axisTick: { alignWithLabel: true }, axisLabel: { interval: 0, formatter: function(value) { /*return value.split("").join("\n");*/ if(value.length > 3) { return value.substring(0, 3) + ".."; } else { return value; } } } }],
最终效果:
完了!
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
评价
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:
50010702506256


欢迎加群交流技术