echarts-使⽤echarts过程中遇到的问题（） 1. 配合tab切换时，被display:none的元素init设置echarts失败
2018-11-09  18:09:35
现象描述：有⼀个tabs选项卡，每个切换项A、B中都有使⽤echarts，默认展⽰的A项中的ecarts初始化和绘制都没问题。
⽽第⼆个默认隐藏项B就是⼀⽚空⽩。检查B的echarts盒⼦还在且是css中设置的宽⾼⼤⼩。但是内部canvas为空，即图表没有绘制。问题过程：
假如我的echarts图表所在元素为：div#echartsDiv。
并将其⽗元素设置 display:none
然后我console⼀下ElementById('echartsDiv');
展开抛出的对象会发现：他的clientWidth和Height都是0，甚⾄scroll和offset系列的宽⾼皆为0（看图别介意id名对不上）
对⽐⼀个⽗元素没有隐藏的元素，他的宽⾼就很正常：
这样我们就明⽩了，echarts绘制之前是要获取要绘制区域的宽⾼的，如果皆为0那肯定失败的。
到问题原因，就是解决：
既然根出在初始化时的元素宽⾼上，那我们开局就设置宽⾼即可。pending
我这⾥的主要问题是场景⽤在移动端，元素宽度肯定要随着设备的屏幕改变的。
如果直接在style上设置（注意，我尝试在css上设置了，没⽤），不能设置固定的数值。
所以我利⽤js的⽅法在js的开端设置了下：
let echartsW= $('.echarts-box').width();
$('.echarts-cont').css('width',echartsW);
echarts-box是我存放图标的总的⽗元素，echarts-cont是我所有图标公⽤的类名。
然后如果在pc端做响应式的页⾯时，如果遇到需要满⾜当屏幕⼤⼩被⽤户扯着随机变时图标也要改变的需求时，可以试试下边这个：
$(window).resize(function () {
let echartsW= $('.echarts-box').width();
$('.echarts-cont').css('width',echartsW);
});
（以下问题均已解决，空闲时间过来填充）
2、默认显⽰的坐标指⽰器重新填充样式后，变成第⼀列显⽰了，希望展⽰最后⼀个
长啥样呢？先来个官⽹demo图：
图⽚来⾃：
好了，打个照⾯后来说需求：
坐标指⽰器重新填充样式：
想要上边那样的效果，就是⼀条紫线，⽽且线有渐变：设置位置为：
x轴的  axisPointer  属性：
对了⼈就好改了：
线的样式主要改他的  lineStyle  ，
去掉底部⼿柄的显⽰：
不想显⽰直接改成false就⾏了。不过如果想显⽰好看点的，挣扎⼀下的话，就改label下边这些样式。
效果：
默认显⽰展⽰最后⼀个：
我这⾥封装成了函数，然后把对象return出去，在xAxis⾥边的axisPointer上调⽤这个函数，顺便传参（参数为x轴上的数据），设置成最后⼀个，默认展⽰的就是最后⼀个了!!
3、y轴左对齐+偏移的问题
y轴左边⽂字要想设置左对齐，可以设置  axisLabel  的 align：
但是，你发现，真实情况是设置了left之后长这倒霉样：
⾸先能看出来，是以y轴为中⼼点的。官⽹⼀个图很形象：
center : ,    left : ,      right :
看出规律了吗？
他是以柱⼦为中⼼线进⾏偏移的。
那回到最初的问题，
为什么y轴左边⽂字设置left后就和y轴柱⼦重叠了？这是因为还有⼀个默认的margin值：
把这个margin值设为0即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。