方法一、
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({
})