tnblog
首页
视频
资源
登录

echarts中tooltip 基本样式问题处理

11373人阅读 2018/12/31 21:39 总访问:186449 评论:3 收藏:0 手机
分类: 前端

在echarts中遇到几个样式问题,现总结如下:


1、tooltip中样式中 值换行


在tooltip中修改加上一句代码


  1. formatter: '{b0}: {c0}<br />'


示例如下:


  1.                   tooltip: {
  2.                         trigger: 'axis',
  3.                         axisPointer: { // 坐标轴指示器,坐标轴触发有效
  4.                             type'shadow' // 默认为直线,可选为:'line' | 'shadow'
  5.                         },formatter: '{b0}: {c0}<br />'
  6.                     }


最终效果:


2、X轴超过4个标题显示不完全


在xAxis中加上这段代码  鉴于字数长度过长,排版不够,这里设置了字数长度,多出的用省略号替代


  1.         
  2.                        axisLabel: {
  3.                             interval: 0,
  4.                             formatter: function(value) { /*return value.split("").join("\n");*/
  5.                                 if(value.length > 3) {
  6.                                     return value.substring(03) + "..";
  7.                                 } else {
  8.                                     return value;
  9.                                 }
  10.                             }
  11.                         }


示例如下:


  1.                     xAxis: [{
  2.                         type'category',
  3.                         data: ['承办总件次''承办单位数''独办''分办''主办'],
  4.                         axisTick: {
  5.                             alignWithLabel: true
  6.                         },
  7.                         axisLabel: {
  8.                             interval: 0,
  9.                             formatter: function(value) { /*return value.split("").join("\n");*/
  10.                                 if(value.length > 3) {
  11.                                     return value.substring(0, 3) + "..";
  12.                                 } else {
  13.                                     return value;
  14.                                 }
  15.                             }
  16.                         }
  17.                     }],


最终效果:


完了!


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739

评价

剑轩

2019/1/10 23:54:49

写得很好必须给赞!

噢大菁:@剑轩大佬大佬(*^▽^*)

2019/1/11 11:36:52 回复

剑轩:@噢大菁哈哈,还没有那么老啦*.*

2019/1/11 11:45:58 回复

ionic3实战使用echarts图表(柱状图)

在公司有些东西需要投到大屏幕上去显示,也就是电视显示屏(安卓版的),但是我没普通的html代码并不能打包到上去安装使用...

echarts 显示坐标点。echarts 自定义显示坐标点。echarts 个性化坐标提升显示,

最简单的显示出来,直接在series中对应的数据项里边设置一下label即可label: { show: true, position: &#39;top&...

echarts自定义图表提示框。鼠标指上去显示。echarts tooltip的使用

官方文档:https://echarts.apache.org/zh/option.html#tooltip 使用的是tooltip,如果只是要显示出来,直接设置trigger: ...

echarts修改横纵坐标颜色。修改折线图线的宽度

echarts修改横坐标颜色代码主要是这样的 axisLine:{ lineStyle:{ ...

echarts图例legend颜色各不相同,图例legend空心圆

代码如下:legend: { // x:&#39;right&#39;, //可设定图例在左、右、居中 // padding:[0,50,0,0], //...

echarts折线图使用示例。包含颜色渐变,节点样式,图例legend样式等

设计图如下 代码如下&lt;!-- 学习趋势图 --&gt; &lt;template&gt; &lt;div class=&quot;learnTrendChartContainer&q...

echarts提示框tooltip属性

tooltip: { show: true, // 是否显示提示框组件 trigger: &#39;axis&#39;, // 触发类型(&#39;item&#39;,...

echarts 仪表盘gauge颜色渐变。echarts圆环进度条。echarts圆环进度条弧形

效果如下: 配置项代码如下// 基于准备好的dom,初始化echarts实例 const myChart = this.$echarts.init(document.getEl...

echarts 设置x坐标刻度的颜色

是使用axisLabel下面的颜色设置,不是nameTextStyle不要搞混了。nameTextStyle官方解释是坐标轴名称的文字样式,要和坐标轴...

echarts setoption 不重新渲染

Echarts渲染的逻辑如果 echarts 未实例化则进⾏实例化过程,⼀旦实例化,便会在div容器⽣成⼀个 echarts_instance属性,该...

echarts 图表颜色设置,饼图颜色渐变

[TOC]echarts 图表颜色设置在外层加一个color数组就行了 color:[&quot;#1890FF&quot;,&quot;#91CB74&quot;,&quot;#FAC858&...

echarts饼图通过grid设置位置不生效。饼图设置位置

grid 记得是平面直角坐标系的意思,而仪表盘、饼图这种,是通过设置中心点位置的方式定位的。所以仪表盘、饼图这种应该这样...

js与Controller分割字符串的方法

js: varstr=OpenRule; varstrs=newArray(); strs=str.split(&quot;,&quot;); for(vari=0;i&lt;strs.length;i++){ $(&q...

如何修改CSS存在的element.style内联样式

改腾讯地图的时候调整了下样式,发现样式一直存在问题,修改style里面的值,一点用都没有,html中这个值还找不到是在哪里出...

c、VB.net全角半角转换方法

///&lt;summary&gt; ///转全角的函数(SBCcase) ///&lt;/summary&gt; ///&lt;paramname=&quot;input&quot;&gt;任意字符串...
真正的顺其自然,其实是竭尽所能之后的不强求,而非两手一摊的不作为
排名
19
文章
24
粉丝
11
评论
15
css实现简单矩形对话框
剑轩 : 现在来看一下,这个正好用到
三分钟快速复习MVC知识
瑾语 : 棒 总结的很好
渣渣学安卓之时间选择器和文本框操作
修心 : 666666横线的方式和我想法完全一样
渣渣学安卓之banner图和首页布局
晓见 : 哇哦,小姐姐这个系列文章写得很好哇,期待更多佳作~
渣渣学安卓之登录摸索及页面效果实现
剑轩 : 帅帅帅帅帅!那个背景图是不是有点太大了哦。哈哈相素太高了么,可...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
有情人终成眷属,没钱人亲眼目睹。