方法一、
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({
//相关配置代码
})
在ionic3 + angular4 中使用Echart插件
最新推荐文章于 2020-12-15 10:27:07 发布