ionic学习(九):ionic3引入echarts及在线测试后复制到项目内

参考这里:https://blog.****.net/weixin_36593033/article/details/78087329

步骤

1.安装

安装命令:

npm install echarts --save//下载ECharts

npm install @types/echarts --save //// ECharts的官方版本是基于JavaScript 的,下载ECharts的TypeScript定义文件

2.引入

在使用的页面ts文件内引入:import ECharts from 'echarts';

ionic学习(九):ionic3引入echarts及在线测试后复制到项目内

在html页面:

<div id="container" style="height: 100%"></div>

ionic学习(九):ionic3引入echarts及在线测试后复制到项目内

3.使用

3.1在周期函数内引用画图函数,那几个周期函数都可以,什么加载,进入函数都可以

ionic学习(九):ionic3引入echarts及在线测试后复制到项目内

4. 调试代码:

去官网:http://echarts.baidu.com/examples/index.html 调试代码

ionic学习(九):ionic3引入echarts及在线测试后复制到项目内

5.在ts文件中引用代码:

将上一步调试好的option中的代码。复制到下图中的option中即可!

ionic学习(九):ionic3引入echarts及在线测试后复制到项目内

其他:

其他样式可以百度搜索,很全!