在ionic3 + angular4 中使用Echart插件

xiaoxiao2021-02-28  87

方法一、 1. 引用Echart.js在src/index.html下方 2. <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script> 然后在需要使用Echart的ts文件中使用 declare var echarts; 声明echarts变量 3. 在相应的模板html中,声明Echarts的容器,并给出相应的标识(#container) <!-- 柱状图 --> <div #container class="echart-main" (window:resize)="onResize($event)"></div> 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 --save 3. declarations.d.ts文件中声明 echarts 变量 declare module 'echarts'; 4. 页面中调用 import echarts from 'echarts'; 5. 添加Ttypings解析(用于编译器的智能索引) npm install @types/echarts --save 6. <div id='container' class="echart-main" (window:resize)="onResize($event)"></div> 7. let ctx = <HTMLElement>document.getElementById('myChart'); this.chart = echarts.init(ctx); this.chart.setOption({ //相关配置代码 })
转载请注明原文地址: https://www.6miu.com/read-44413.html

最新回复(0)