tnblog
首页

echarts中tooltip 基本样式问题处理

278人阅读 2018/12/31 21:39 评论:3 收藏
分类: 前端

在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;
                                }
                            }
                        }

                    }],


最终效果:


完了!

请先登录

{{item.title}}

{{item.content}}
真正的顺其自然,其实是竭尽所能之后的不强求,而非两手一摊的不作为
博主搜索
文章类别
前端 7篇
微信 2篇
.NET 7篇
随笔 1篇
其他 2篇
最新文章
图片上传的安全校验
HBuilder打包apk文件详解
echarts中tooltip 基本样式问题处理
不重复订单号生成的方法
怎么解决vs2015的30天试用期评估结束问题
程序员转正述职报告
css中单位px,em,rem和vh/vw的理解
三分钟快速复习MVC知识
微信交易单号和订单号的区别
C#腾讯地图Web端定位地址搜索及手机导航
如何修改CSS中存在的element.style内联样式
最新评价
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}