Question

我正在尝试使echarts组件适合在6角仪表板中工作。我已经通过npm将echarts和ngx-echarts添加到了项目中。

在该示例中，他们加载了函数formatUtil = echarts.format。我可以通过导入echart来（尝试）加载等效库：

import { format } from 'echarts';

我的主班有

formatUtil: new format;

稍后在我的代码中，我调用了formatter函数以构建工具提示：

  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函数的最佳方法，以便我可以在角度组件中调用它吗？

Answer 1

我有同样的问题。我设法通过导入echart命名空间并将其强制转换为任何名称来解决它。

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

import * as echarts from 'echarts'

然后我声明了一个变量：

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

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

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

1 个答案: