echarts x轴名称太长

echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称

 1 function extension(mychart, type) {
 2   let extension = document.getElementById("extension");
 3   mychart.on(‘mouseover‘, function (params) {
 4     if (params.componentType == type) {
 5       extension.innerHTML = params.value;
 6       let mousePos = mouseMove();
 7       let x = mousePos.x - 180;
 8       let y = mousePos.y - 50;
 9       extension.style.cssText = "top:" + y + "px;left:" + x +"px;display:inline;";
10     }
11   });
12
13   mychart.on(‘mouseout‘, function (params) {
14     if (params.componentType == type) {
15       extension.style.cssText = "display:none";
16     }
17   });
18 };
19
20 function mousePosition(ev){
21   if(ev.pageX || ev.pageY){
22     return {x:ev.pageX, y:ev.pageY};
23   }
24   return {
25     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
26     y:ev.clientY + document.body.scrollTop - document.body.clientTop
27   };
28 }
29 function mouseMove(ev){
30   ev = ev || window.event;
31   return mousePosition(ev);
32 }
33
34 图表中
35 xAxis: {
36   type: ‘category‘,
37   data: [],
38   triggerEvent: true,
39   axisLabel: {
40     formatter: function (value) {
41       let res = value;
42       if (res.length > 5) {
43         res = res.substring(0, 4) + "..";
44       }
45       return res;
46     }
47   },
48 },
49
50 #extension {
51   position: absolute;
52   font-size: 14px;
53   border-radius: 5px;
54   color: #fff;
55   background: #000;
56   filter:alpha(opacity=70);
57   -moz-opacity:0.7;
58   -khtml-opacity: 0.7;
59   opacity: 0.7;
60   padding:5px;
61   display: none;
62 }

原文地址:https://www.cnblogs.com/mxyr/p/9237996.html

时间: 2024-11-05 17:32:52

echarts x轴名称太长的相关文章

echarts pie 图表当名称太长时

当饼图的名称太长时,只显示几个字符,其余的... 1 let use; 2 use.setOption({ 3 tooltip: { 4 trigger: 'item', 5 formatter: "{a} <br/>{b} : {c}MB ({d}%)" 6 }, 7 series: [ 8 { 9 name: '面积模式', 10 type: 'pie', 11 radius: '60%', 12 center: ['40%', '55%'], 13 roseType:

Mac下关于——你不能拷贝项目“”,因为它的名称太长或包括的字符在目的宗卷上无效。文件的删除

内容是google的,测试有效,因为用revel打包的东西删除以后有这个循环bug Mac下关于——你不能拷贝项目“”,因为它的名称太长或包括的字符在目的宗卷上无效.文件的删除 关于这个问题我找到的一些资料, 可以通过如下方法删除 1.打开 终端 应用程序. 2.键入: sudo rm -rf 注意:在“-rf”后键入一个空格.没有空格该命令将不能执行.在步骤 6 之前请都不要按下 Return 键. 3.打开您的“废纸篓”. 4.从“编辑”菜单中选择“全选”. 5.将“废纸篓”中的所有内容都拖

WCF服务引用之后自动生成的泛型代理类名称太长的解决方案

问题:WCF服务引用之后会将原来的泛型类自动生成一个代理类,但是有时候名称太长怎么办? 解决方案: 1.方案一: 调用客户端同样也引用这个泛型类的类库. 2.方案二: 找到这个泛型类,然后在上面的[DataContract]中添加Name属性. 如下,{#}会被自动替换为Hash码.{0}和{1}会自动变成泛型值的名称. namespace DataContractSerializerDemos { DataContract(Name="BillOf{0}{1}{#}")] publi

【转】如何解决Ubuntu终端里面显示路径名称太长

原文网址:http://jingyan.baidu.com/article/3d69c5516c129df0ce02d77b.html Ubuntu 默认的终端下面,进入很多层的目录后,前面那个提示符会显示完整的路径,这样命令行太长,让人觉得不舒服,现在教大家一个方法修改一下使命令行只显示当前目录的最后一级目录名,这样看起来也好,用pwd可以看到完整的路径名. 工具/原料 ubuntu xshell 方法/步骤 找到配置文件先进行备份:  cp  ~/.bashrc  ~/.bashrc-bak

Ztree 树插件 树节点名称太长的解决方案

样式允许的情况下 给背景div加滚动条.. 或者使用省略号方法:使用addDiyDom   http://blog.csdn.net/zhengbo0/article/details/17759543 var setting = {            view: {                addDiyDom: addDiyDom            }        }; function addDiyDom(treeId, treeNode) {            var s

android 如何将桌面较长的图标名称显示完整(有些APP的图标名称太长)

1.请找到对应的res资源,修改styles.xml,将 <style name="WorkspaceIcon.Portrait"> <item name="android:drawablePadding">0dp</item> <item name="android:paddingLeft">4dp</item> <item name="android:paddingR

解决Ubuntu终端里面显示路径名称太长

方法/步骤 找到配置文件先进行备份:  cp  ~/.bashrc  ~/.bashrc-bak 找到配置文件修改: vi  ~/.bashrc 备份是为了防止配置修改出错,可以还原: 下面是我的/home/vagrant/.bashrc,真正修改到就一行代码: 找到: 62     PS1='${debian_chroot:+($debian_chroot)}\[email protected]\h:\W\$ ' 修改将小写w改为大写W保存,执行source /home/vagrant/.ba

echartsx轴名称过长,截断+鼠标划过显示全称

xAxis : [ { triggerEvent:true,//这句很重要,没有不会触发事件 -- } ], -- videoChart.setOption(option); extension(videoChart); function extension(mychart) { //判断是否创建过div框,如果创建过就不再创建了                        var id = document.getElementById("extension"); if(!id)

echarts 纵坐标数字太长显示补全,以及文字倾斜显示

如上数字太长,显示补全,以及x坐标的月份当数量大的时候也会显示补全: x可以调节纵坐标label的宽度 y2可以调节横坐标label的高度 grid: { x: 100, //默认是80px y: 60, //默认是60px x2: 40, //默认80px y2: 45 //默认60px }, xAxis: [{ type: 'category', name: '', axisLabel:{ interval:0, rotate:45, }, data: null, }], axisLabel