安装

npm install echarts --save
npm install @types/echarts --save

基本使用

定义一个dom

<div id="chart" style="min-width: 1500px;min-height:800px;"></div>

定义对象

//数据
eChartDatas: any;
//图例
legends:any;//echart
echarts: any;
myChart: any;

获得echarts对象

// 基于准备好的dom，初始化echarts实例
this.echarts = require('echarts');
//只能初始化一次:https://www.echartsjs.com/api.html#echarts.init
if (this.myChart == null || this.myChart == undefined) {this.myChart = this.echarts.init(document.getElementById('chart') as HTMLDivElement);
}

多折线图生成

效果如图

//绘制chart
// 指定图表的配置项和数据
var option = {//标题title: {text: '监测数据统计图',// left: 'center'},//图例legend: {data: this.legends},tooltip: {trigger: 'axis',grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'time',splitLine: {show: false}},yAxis: {type: 'value',splitLine: {show: false}},series: []
};
//循环录入数据
this.eChartDatas.forEach(dataList => {option.series.push({name: dataList[0].tip,type: 'line',showSymbol: false,hoverAnimation: false,data: dataList});
});// 使用刚指定的配置项和数据显示图表。
this.myChart.clear();
this.myChart.setOption(option);

示例代码

示例代码

参考资料

Is it possible to use ECharts Baidu with Angular 2 and TypeScript
Ionic2系列——在Ionic2中使用ECharts
echarts demo
echarts 多折线demo