echart3.8.4的lable的formatter添加下标访问value的支持

最新推荐文章于 2024-02-23 14:50:24 发布

原创

最新推荐文章于 2024-02-23 14:50:24 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文讲述了作者在维护一个依赖旧版Echarts的报表系统时遇到的问题，如何因用户需求定制气泡图label而受限于版本，并分享了自定义formatter函数以应对未来升级的挑战。作者对Echarts的开源精神表达了赞赏。

有点汗颜，老项目了，也不敢升级echarts，谁知道升级了会怎么样。

介绍一下基本信息，这是一个数据可视化系统，说白了就是一个报表系统，支持常见的图表类型。界面上可以进行复杂的配置，然后把这些配置保存成一个巨大无比的json，保存到数据库。当页面打开时就是根据这个json还原报表。用户想定制气泡图中label的显示，系统刚好没有提供支持。

所有问题就都围绕这个展开了。大家知道，要想定制气泡图的label，就是气泡图中的文字，可以使用series.label.formatter来实现，这个支持字符串和函数，函数很灵活的，很简单就能实现用户的需求了，不过问题来了，因为所有配置都是以字符串的形式保存到数据库中，函数序列化是当然就没有了，这条路走不通。只能翻看echarts的文档，看formatter是字符串时能支持到什么程度。下图中的内容好像刚好可以满足我的需要，不幸的是项目中的echarts版本太低了，不敢升级呀！

在这里插入图片描述
到此根本没法进行了啊。就想自己参照最新版本的echarts把这部分支持拷贝过来。有点复杂，要搬很多方法过来，放弃了。然后决定自己改改echarts，支持@[n]这种写法，这样即使以后升级新的echarts了，也不至于破坏存量的报表。

下面就贴代码了，改写的是formatTpl方法

function formatTpl(tpl, paramsList, encode) {
      if (!isArray(paramsList)) {
        paramsList = [paramsList];
      }

      var seriesLen = paramsList.length;

      if (!seriesLen) {
        return '';
      }

      var $vars = paramsList[0].$vars || [];

      for (var i = 0; i