ionicecharts介绍使用及错误解决
时间：2023-04-05 00:12:20
HTML5
1.在项目中安装echartscnpminstallecharts--save，但是ionic项目依赖angular和typeScript，所以安装ts支持包cnpminstall@types/echarts--save从官网一个建议：3.1.1版本之前,非官方维护了npm上的ECharts包。从3.1.1开始，npm上的ECharts和zrender的包由EFE官方维护。所以你得安装zrendercnpminstallzrender2。import并使用所需页面的name.ts引入以下importechartsfrom'echarts'；使用以下initCharts(){echarts.init(this.myCharts.nativeElement).setOption({xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},系列：[{data:[820,932,901,934,1290,1330,1320],type:'line'}]},true);}调用构造函数(publicnavCtrl:NavController,publicnavParams:NavParams){console.日志（电子图表）；this.initCharts();}页面显示发现name.html定义了一个div，渲染图表如下charts//#charts通过name.ts文件中的ViewChild
获取dom节点比如dom节点@ViewChild('charts')myCharts:ElementRef运行ionicserve报错如下图，大概意思是获取不到dom节点，也就是我们展示的div地图。打印后发现为null或undefine。后来打印了ionicpage的生命周期，测试了ionicpage的生命周期函数。生命周期函数触发时序constructor()在页面创建时触发1ionViewDidLoad()在页面加载时触发2ionViewWillEnter()在页面即将进入时触发3ionViewDidEnter()在进入页面时触发4在constructor()和ionViewDidLoad()initCharts()函数页面还没有加载，获取不到dom节点。dom节点可以在ionViewWillEnter()和ionViewDidEnter()中获取。顾名思义，只有在页面加载时才能获取dom节点，所以再次加载生命周期函数完成后，可以改为ionViewWillEnter(){}或者ionViewDidEnter(){this.initCharts();}运行ionicserve完美解决3.完整代码示例Charts.ts如下angular';importechartsfrom'echarts';/***为ChartsPage页面生成的类。**有关*Ionic页面和导航的更多信息，请参阅https://ionicframework.com/docs/components/#navigation。*/@IonicPage()@Component({selector:'page-charts',templateUrl:'charts.html',})导出类ChartsPage{@ViewChild('charts')myCharts:ElementRefconstructor(publicnavCtrl:NavController,publicnavParams：NavParams){console.log(echarts);}ionViewDidLoad(){//this.initCharts();console.log('ionViewDidLoadChartsPage');}//ionViewDidEnter(){//this.initCharts();//}ionViewWillEnter(){this.initCharts();}initCharts(){console.log(document.getElementById('charts'));echarts.init(this.myCharts.nativeElement).setOption({xAxis:{type:'category',data:['周一','周二','周三','周四','周五','周六','Sun']},yAxis:{type:'value'},series:[{data:[820,932,901,934,1290,1330,1320],type:'line'}]},true);}}charts.html
charts 