ngx-echarts遇到的坑

1、ngx-echarts版本问题导致的问题

2、高度传值传不进去

 

解决方式：

<div echarts [loading]="loading" [loadingOpts]="getLoadingOpts()" 
         [options]= "option" [initOpts]= "opts" [merge]="updateOptions"
         (chartClick)="chartClick($event)"
         (chartInit)="onChartInit($event)" [ngStyle] = "getChartStyles()"></div>

/**
   * 获取图形的高度以及其他样式  其他样式目前未知
   * @returns {{height: string}}
   */
  getChartStyles() {
    // +5是padding的高度，图形和边框有一定的距离 模块只需要设置图形的高度
    return {
      height: this.height + 5 + 'px',
    };
  }

模块将[height] 传进来

 

参考API

[options]: 定义相关配置和数据

[merge]: 您可以使用它来更新部分选项，特别是当您需要更新图表数据时非常有用。事实上，合并的值将在EncTyStuts.StopopOut.（）中使用NoCuff= false。因此，您可以参考ECTRAMP文档以获取详细信息。
[loading]: 是否要loading
[initOpts]: 将在ECTRES.In（）中使用。它可以包含DeVeleXeleRe比率、渲染器、宽度或高度属性。
[theme]: 使用它来初始化主题图表。您需要在.angcli-cli.jSON或其他模块解析器中包含主题文件。
[loadingOpts]: 输入对象以自定义加载样式。详情请参阅ECTRAMP文档。default:
{
  text: 'loading',
  color: '#c23531',
  textColor: '#000',
  maskColor: 'rgba(255, 255, 255, 0.8)',

  zlevel: 0

}

[options]：与官方演示网站的选项相同
[dataset]：您可以忽略“options”中的“data”属性，并用于dataset绑定系列数据。
[loading]：布尔属性。当您的数据未准备好时，使用它来切换加载动画的echarts。
theme：用它来初始化具有主题的echarts。你需要在主题文件.angular-cli.json或index.html。例如，如果我们要dark.js在Echarts主题页面中使用：<div echarts theme = "dark" class = "demo-chart" [options] = "chartOptions"></div>这样我们就使用成功dark主题了。
(chartInit)它暴露了echartsInstance 'chartInit'事件。所以，你可以直接调用的API一样：resize()，showLoading()

 

• html:

<div echarts class="demo-chart" [options]="chartOptions" (chartClick)="onChartClick($event)"></div>

• The '$event' is same with the 'params' that Echarts dispatches

It supports following event outputs:

• chartClick: It emits the same params of 'click' event
• chartDblClick: It emits the same params of 'dblclick' event
• chartMouseDown: It emits the same params of 'mousedown' event
• chartMouseUp: It emits the same params of 'mouseup' event
• chartMouseOver: It emits the same params of 'mouseover' event
• chartMouseOut: It emits the same params of 'mouseout' event
• chartGlobalOut: It emits the same params of 'globalout' event
• chartContextMenu: It emits the same params of 'contextmenu' event (since v1.2.1)
• chartDataZoom: It emits the same params of 'dataZoom' event (thanks to averhaegen)

3、echarts4.0取消了空数据场景

    

4、实现自定义钻取时，再返回上一层的实现中，需要点击一次或者鼠标离开画布，才能触发echars的绘制。

解决办法：ngx-echarts使用echarts自定义toolbox进行钻取，值改变后无法触发onchange，导致赋值不上。