echarts的title和legend重合解决（各种小细节）

﹏ヽ暗。殇╰゛Y 2021-11-23 09:26 2619阅读 0赞

**一：关于title与legend重叠**

1.重合样子

![1170680-20190612174009663-1445423283.png][]

2.解决办法：

legend:\{

show: true,

**top:"6%"，//与上方的距离 可百分比% 可像素px**

\},

3.解决后样子：

![1170680-20190612173918547-1020365030.png][]

--------------------

**二：关于dataZoom数据区域缩放组件宽高调整**

1.原来样子：

![1170680-20190612174426700-860761861.png][]

2.解决办法：

dataZoom: \[

\{  
　　　　　　　　**height:"15px",//高度设置，另外还有宽度**

width:"100%",

\}\]

3.调整后：

![1170680-20190612174604731-520839077.png][]

--------------------

**三：关于显示数据到柱状图**

1.显示前：

![1170680-20190612175445655-1499296414.png][]

2.解决方法：

series : \[  
　　　　　　\{  
　　　　　　　　name: yTitle\[i\],  
　　　　　　　　type:echartsType\[i\],  
　　　　　　　　itemStyle:\{  
　　　　　　　　　　normal:\{  
　　　　　　　　　　　　label: \{  
　　　　　　　　　　　　　　**show: true,//是否在图上展示数据**  
　　　　　　　　　　　　　　// position:'top',//数据在柱状图顶部显示  
　　　　　　　　　　　　　　textStyle:\{  
　　　　　　　　　　　　　　　　color:'\#000000' //数据颜色  
　　　　　　　　　　　　　　\},  
　　　　　　　　　　　　　　formatter: '\{c\}' //显示百分比  
　　　　　　　　　　　　　\}  
　　　　　　　　　　　　\},  
　　　　　\}\],

3.显示后

![1170680-20190612175412430-530530356.png][]

--------------------

**四：关于y轴值太大，在移动端被遮挡而显示不全。**

1.遮挡样子：

![1170680-20190613093646470-1538663547.png][]

2.解决办法：

yAxis : \[\{

type : 'value',  
　　　　　　axisTick: \{  
　　　　　　　　inside: true  
　　　　　　\},  
　　　　　　scale: true,  
　　　　　　axisLabel: \{  
　　　　　　　　margin: 2,  
　　　　　　　　**formatter: function (value, index) \{　　//主要调整部分**  
 **　　　　　　　　　　if (value >= 10000 && value < 10000000) \{**   
 **　　　　　　　　　　　　value = value / 10000 + "万";**  
 **　　　　　　　　　　\} else if (value >= 10000000) \{**   
 **　　　　　　　　　　　　value = value / 10000000 + "千万";**  
 **　　　　　　　　　　\}**  
 **　　　　　　　　　　return value;**  
 **　　　　　　　　\}**  
　　　　　　　\},  
　　　　　　"splitLine": \{//网格线 默认true  
　　　　　　　　"show": true  
　　　　　　\}  
　　　　\}\],

3.解决后：

![1170680-20190613092943583-382113682.png][]

4.相关知识点

**yAxis.axisLabel.margin：刻度标签与轴线之间的距离。默认值是8，可以改小一点。不过本来的值已经很小了，这个没多大作用。**  
**　　　　yAxis.axisLabel.formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。**  
**　　　　grid.left：grid 组件离容器左侧的距离。默认值是10%。grid.right是距离右侧的距离,grid.top距离顶部的距离.grid.bottom距离底部的距离。**

--------------------

**五：关于柱状图hover阴影显示与否**

1.显示效果

![1170680-20190613144124985-942309079.png][]

2.相关知识点

xAxis: \[  
　　　　　　\{  
　　　　　　　　name:"小时",  
　　　　　　　　type: 'category',  
　　　　　　　　data: newXtitle,  
　　　　　　　　**// axisPointer: \{**   
 **　　　　　　　　　//　type: 'shadow'  //显示柱状图阴影  注释掉之后就不显示阴影  默认是直线指示器line**  
 **　　　　　　　　//\}**  
　　　　　　\}  
　　　　\],

3.不显示阴影之后

![1170680-20190613144005483-285340125.png][]

4.相关知识点

![1170680-20190613144403538-1592398018.png][]

--------------------

**六：关于鼠标悬停提示框超出图表范围**

1.超出范围

![1170680-20190615160513230-2022936562.png][]

2.解决办法

**tooltip : \{**

**　　　　　　confine: true**

**　　　　　\},**

3.解决后

![1170680-20190615160556506-1564700875.png][]

4.相关知识点

![1170680-20190615160715040-150556794.png][]

**默认：\[ default: false \]**

**　　　　　　是否将 tooltip 框限制在图表的区域内。**

**　　　　　　当图表外层的 dom 被设置为 `'overflow: hidden'`，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。**

--------------------

**七: 关于x轴标签显示问题**

**　　　　1.显示所有标签**

![1170680-20190615164539942-1810852745.png][]

2.相关知识点

**axisLabel: \{ **

**　　　　　　　　interval:0,　　//强制显示所有标签 设置为1则 隔一个标签,显示一个标签  
　　　　　　　　rotate: 40,　　//文字倾斜角度**

***　　　　　　\}***

*　　　　3.隔个显示*

*　　　　　　![1170680-20190615164930812-480844970.png][]*

--------------------

***八: ***

*　　　　　　*

**PS：都是一些小细节方面的东西，以后再遇到了就继续来添加。**

转载于:https://www.cnblogs.com/moutudou/p/11011247.html

[1170680-20190612174009663-1445423283.png]: /images/20211122/49af57af3ea04ee7b4e4d132c1b880e7.png
[1170680-20190612173918547-1020365030.png]: /images/20211122/0fcc5efda53d442993f5b43a8fabdfd6.png
[1170680-20190612174426700-860761861.png]: /images/20211122/f1a3020bc7584e20a183c7eb1193605b.png
[1170680-20190612174604731-520839077.png]: /images/20211122/38447f2c723f4aabbcc88a6c6bf4392b.png
[1170680-20190612175445655-1499296414.png]: /images/20211122/a15eb02778ba44ef9b1ee42db2770fde.png
[1170680-20190612175412430-530530356.png]: /images/20211122/e8670b0f81ec44cfb810c96204de7f39.png
[1170680-20190613093646470-1538663547.png]: /images/20211122/38fe6f2fe13042098c9cc3c48f80a918.png
[1170680-20190613092943583-382113682.png]: /images/20211122/5570f451bd0e4d50bb375f0db71c9204.png
[1170680-20190613144124985-942309079.png]: /images/20211122/5edf5aa4fff746a3a13bb95661172ab7.png
[1170680-20190613144005483-285340125.png]: /images/20211122/d6c377a7aab649bfb2ceedb4500737d9.png
[1170680-20190613144403538-1592398018.png]: /images/20211122/6f7bbf53f62347978c5099b7e7f18bd1.png
[1170680-20190615160513230-2022936562.png]: /images/20211122/965e134f21514f90a170abf707397158.png
[1170680-20190615160556506-1564700875.png]: /images/20211122/71973270d6794abcb9862c6ae69a8b44.png
[1170680-20190615160715040-150556794.png]: /images/20211122/4f884b462c5b478a81c8334c4f2790d8.png
[1170680-20190615164539942-1810852745.png]: /images/20211122/c3d8186607a94c5280ce510ddf3803c0.png
[1170680-20190615164930812-480844970.png]: /images/20211122/c21380ba456145b6b4bfb022f3453557.png