在ionic3 + angular4 中使用Echart插件

方法一、1.  引用Echart.js在src/index.html下方2.  然后在需要使用Echart的ts文件中使用  declare var echarts; 声明echarts变量3.  在相应的模板html中，声明Echarts的容器，并给出相应的标识（#container）class="echart-main" (window:resize)="onResize($event)">4.  (window:resize)="onResize($event)"是为了做自适应，方便不同大小的device调试，ts中给出对应的响应事件：onResize(e){this.chart.resize();}5.  获取容器container的dom节点：@ViewChild('container') container: ElementRef;这里需要注意在文件内引入ElementRef,ViewChild，6.  下面是对元素进行操作，插件的使用：let currentData = this.chartData;let ctx = this.container.nativeElement;this.chart = echarts.init(ctx);this.chart.setOption({//相关配置代码})方法二、1.  使用npm/cnpm/yarn...安装依赖包2.  npm install echarts --save3.  declarations.d.ts文件中声明 echarts 变量declare module 'echarts';4.  页面中调用   import echarts from 'echarts';5.  添加Ttypings解析（用于编译器的智能索引） npm install @types/echarts --save6.  'container' class="echart-main" (window:resize)="onResize($event)">7.  let ctx = document.getElementById('myChart');this.chart = echarts.init(ctx);this.chart.setOption({//相关配置代码})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！