在Angular 6中加载和使用echarts.format

Question

我正在尝试调整echarts组件以在angular 6仪表板中工作。我已经通过npm将echarts和ngx-echarts添加到项目中。

在该示例中，它们加载一个函数formatUtil = echarts.format。我可以(尝试)通过导入echarts来加载等效库，如下所示：

import { format } from 'echarts';

在我的主课上，我有

formatUtil: new format;

在稍后的代码中，我调用了格式化程序函数来构建工具提示：

  tooltip: {
        formatter: function (info) {
          var value = info.value;
          var treePathInfo = info.treePathInfo;
          var treePath = [];

          for (var i = 1; i < treePathInfo.length; i++) {
            treePath.push(treePathInfo[i].name);
          }

          return [
            '<div class="tooltip-title">' + this.formatUtil.encodeHTML(treePath.join('/')) + '</div>',
            'Revenue: $' + this.formatUtil.addCommas(value) ,
          ].join('');
        }
      },

当我将鼠标悬停在工具提示上时，我得到以下错误：

zone.js:195 Uncaught TypeError: Cannot read property 'formatUtil' of undefined
    at formatter (treemap.component.ts:98)
    at ExtendedClass._showTooltipContent (TooltipView.js:544)
    at ExtendedClass.<anonymous> (TooltipView.js:479)
    at util.js:424
    at ExtendedClass._showOrMove (TooltipView.js:356)
    at ExtendedClass._showSeriesItemTooltip (TooltipView.js:478)
    at ExtendedClass._tryShow (TooltipView.js:336)
    at ExtendedClass.<anonymous> (TooltipView.js:158)
    at Object.handler (util.js:424)
    at doEnter (globalListener.js:113)

下面是有问题的示例：

https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-show-parent

有没有人能建议最好的方法来调整echarts.format函数，这样我就可以在我的angular组件中调用它？

Answer 1

我也有同样的问题。我已经设法解决了这个问题，方法是导入echart名称空间并将其强制转换为任意名称空间。

首先，我导入了名称空间：

import * as echarts from 'echarts'

然后我声明了一个变量：

formatUtil: any = (<any>echarts).format;

在那之后，我就可以使用它了。