echarts 是百度开源的一个前端数据可视化图表库，用来展示数据非常的便捷。
下面是官网的简介：
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
最近的项目有适配移动端的需求，因此也研究了一下 echarts 移动端适配的方法。
我之前有些过一篇文章，介绍过 echarts 移动端的适配方法，感兴趣的朋友可以去看看：https://www.jianshu.com/p/091c6812b0ad
我这篇文章当然不是想把之前写过的内容，再拎出来写一遍了，这样也太没诚意了。
我这篇文章主要想讲讲的是，自己在使用官网提供的移动端适配解决方案的时候，碰到的问题。
首先还是给出官网提供的移动端适配解决方案吧，原理很简单，就是根据父容器宽高的不同，来配置不同的配置项。
这个解决方案有点类似于 css 的媒体查询，写过 css 的同学应该都不陌生吧。
在这里插入图片描述
如果以前没用过，又想详细了解的同学，可以点击下面的链接，进入官网查看：https://echarts.apache.org/zh/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94
原理虽然简单，但是最近写着写着，发现我按照规则配置的样式好像并没有真正的生效。
比如现在用 echarts 做了个图表：
正常状态是这样的：
在这里插入图片描述
然后随着我屏幕逐渐缩小，这个图表也是逐渐缩小的。
像下面这样的效果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
但是在使用的过程中，我却发现，我照着官网提供的规则去写，好像并不完全奏效。
但是，不知道是我没有掌握 echarts 的调试方法，还是它本身调试起来就比较困难。
花了好大功夫，才终于找到问题所在。
原来是我传入的配置项不是按照顺序传入的，比如我是这样写的：
media: [ // 这里定义了 media query 的逐条规则。
{ // 这条里没有写规则，表示『默认』，
option: { // 即所有规则都不满足时，采纳这个option。
}
},
{
query: { maxHeight: 500}, // 这里写规则。
option: { // 这里写此规则满足下的option。
}
},
{
query: {maxHeight: 300}, // 第二个规则。
option: { // 第二个规则对应的option。
}
},
{
query: {maxHeight: 200}, // 第二个规则。
option: { // 第二个规则对应的option。
}
},
{
query: {maxHeight: 350}, // 第二个规则。
option: { // 第二个规则对应的option。
}
},
]
当我把 echarts 图表的容器的宽度调整到 300 以下的时候，我发现它应用的还是最后一条规则。
最后我调整各项的顺序，按照最大高度的降序排列，才能够正确的显示出来了。
所以我们知道问题出现在哪里了，就是因为我们设置的规则，echarts 内部在运用的时候，并没有进行排序操作，而知识简单的从前往后叠加，所以造成了我碰到的这个 bug。
所以结论就是，如果你想要采用这种方式让 echarts 适配移动端，就需要注意你传入的规则的顺序，按照顺序来配置对应的规则，才不会出错。
网友评论