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

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

nothing_more_than

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

阅读量981

点赞数

分类专栏：前端之路

本文链接：https://blog.youkuaiyun.com/txyzqc/article/details/112990796

版权

前端之路专栏收录该内容

39 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有点汗颜，老项目了，也不敢升级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 < $vars.length; i++) {
        var alias = TPL_VAR_ALIAS[i];
        tpl = tpl.replace(wrapVar(alias), wrapVar(alias, 0));
      }

      for (var seriesIdx = 0; seriesIdx < seriesLen; seriesIdx++) {
        for (var k = 0; k < $vars.length; k++) {
          var val = paramsList[seriesIdx][$vars[k]];
          tpl = tpl.replace(wrapVar(TPL_VAR_ALIAS[k], seriesIdx), encode ? encodeHTML(val) : val);
        }

		// 支持获取value中指定下标的值
		var value = paramsList[seriesIdx].value || [];
		tpl = tpl.replace(/@\[(d)\]/g, function(orgin, match) {
			return value[match] || '';
		});
      }

      return tpl;
    }

在这里要表达一下对echarts的赞美，apache的开源项目，也算是中国人的骄傲呀！！

真希望什么时候自己也能搞点有益于大众的项目。

感觉这篇文章不会帮到别人了，也不奢望有人点赞了，哈哈:)