echarts踩坑总结 | 咸鱼翻身之路

插件 echarts

web前端

发布日期: 2020-03-15

文章字数: 971

前言

最近笔者做的一个需求需要展示多种图表，因此选用了用途比较广泛的 echarts 插件。但是在使用的过程中也遇到了一些问题，在这里做一下总结，以防以后再遇到同样的问题。

坑一：数据没有问题，但是图表不显示

这个问题比较简单，如果传入的数据格式没有问题但是图表又画不出来的话，可以检查图表容器的宽、高，若容器高度为 0 的话，则说明是没有设置容器宽高的原因。在使用 echarts 的时候必须给容器设置宽高，这个在官方教程中有说明，如下图：

坑二：当多个图表使用 tab 切换且图表容器宽度设置为 100%时，图表宽度被压缩只有 100px

这次的需求需要绘制多种图表，且通过 tab 切换的方式切换展示图表，容器的宽度设置为 100%，第一个图表绘制没有问题，但是发现后面的几个图表的宽度不对，图表压缩到一起，显示不完整，如下图所示：

在网上搜索了很多资料，找到了原因，echarts 源码片段如下：

Painter.prototype._getWidth = function() {
  var root = this.root;
  var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
  return (
    (
      (root.clientWidth || parseInt(stl.width, 10)) -
      parseInt(stl.paddingLeft, 10) -
      parseInt(stl.paddingRight, 10)
    ).toFixed(0) - 0
  );
};

上面的代码片段是说，echarts 绘制图表计算宽度的时候，是通过读取 root 的 clientWidth 或者是 parseInt(stl.width, 10)来获取宽度的，由于在本次需求中初始化页面时，除了第一个 tab，后面的 3 个 tab 均设置了 display:none;所以 echarts 无法获取到 clientWidth，而 parseInt(stl.width, 10)) 则是将将 width: 100%;转为 100，所以计算出的图表宽度为 100px，实际上通过检查页面元素发现当前宽度也确实是 100px。因此可以通过给图表设置固定宽度来解决问题，当但是这样可能会有自适应的问题，因此比较好的解决办法就是，通过 js 手动将后面的几个 tab 设置成第一个 tab 的宽度。代码片段如下：

<script>
$(function() {
    // #chart-box1是第二个tab中图表的容器，#chart-box0是第一个tab中图表的容器
  $("#chart-box1").css("width", $("#chart-box0").width());
});
</script>

坑三：echarts 插件实现移动端自适应

在解决图标宽度自适应之后又出现了新的问题就是图表内容无法实现自适应，本来在 PC 端设置的比较合适的属性，在移动端显示却是不太合适，导致图表内容显示不完全，如下图所示：

这个问题需要利用 echart 的媒体查询属性来解决问题，具体教程指路：echarts 媒体查询,解决代码片段如下：

const options = {
  baseOption: {
    // 原始设置
  },
  media: [
    // 这里定义了 media query 的逐条规则。
    {
      query: { maxWidth: 500 }, // 这里写规则，需要注意的是，maxWidth设置的是图表容器的宽度并不是设备的宽度。
      option: {
        // 这里写此规则满足下的option。
        series: [
          {
            name: "应用类型",
            type: "pie",
            radius: ["20%", "30%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                formatter: "{b} {d}%\n",
                position: "outside",
                textStyle: {
                  fontSize: "10"
                }
              },
              emphasis: {
                textStyle: {
                  fontSize: "12",
                  fontWeight: "bold"
                }
              }
            }
          }
        ]
      }
    }
  ]
};