Angular使用echarts

安装

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 TypeScriptIonic2系列——在Ionic2中使用EChartsecharts demoecharts 多折线demo

转载于:https://www.cnblogs.com/Lulus/p/10662093.html

相关资源：DirectX修复工具V4.0增强版