Загрузите и используйте echarts.format в Angular 6

Question

Я пытаюсь адаптировать компонент echarts для работы на угловой панели 6.Я добавил echarts и ngx-echarts в проект через npm.

В этом примере они загружают функцию 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, чтобы я мог вызывать ее в своем угловом компоненте?

Answer 1

У меня была такая же проблема. Мне удалось решить эту проблему, импортировав пространство имен echart и приведя его к любому.

Сначала я импортировал пространство имен:

import * as echarts from 'echarts'

Тогда я объявил переменную:

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

После этого я смог использовать его.