Using the Echart plugin in IONIC3 + ANGULAR4

Method one, 1.  Reference echart.js under src/index.html 2.  <script src= "Https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js" ></script> then use in TS files that need to use Echart declare var echarts;  Declares the Echarts variable 3. In the corresponding template HTML, declare the container of the echarts and give the corresponding identification (#container) <!--histogram--<div #container class= "Echart-main" (window:re  Size) = "OnResize ($event)" ></div> 4. 
    (window:resize) = "OnResize ($event)" is for adaptive, convenient for different size of the device debugging, the corresponding response event in TS: OnResize (e) {this.chart.resize ();  } 5.
    Gets the DOM node of the container container: @ViewChild (' container ') container:elementref;  It is important to note that Elementref,viewchild is introduced into the file, 6.
    Here is the operation of the element, the use of the plug-in: let CurrentData = This.chartdata;
    Let CTX = this.container.nativeElement;
    This.chart = Echarts.init (CTX);  This.chart.setOption ({//Related Configuration Code}) method two, 1. Use Npm/cnpm/yarn ...  Install Dependency Pack 2.  NPM Install Echarts--save 3.

The Declarations.d.ts file declares the echarts variable declare module ' Echarts ';

4. On the page call import echarts from ' Echarts '; 5. Add a TTYPings parsing (smart index for compilers) npm install @types/echarts--save 6.  <div id= ' container ' class= "Echart-main" (window:resize) = "OnResize ($event)" ></div> 7.
    Let CTX =