ionic3使用echarts


1.安裝typings及echarts

npm install typings echarts --global

2.安裝 ECharts 的 TypeScript 定義文件

npm install @types/echarts --save

3.在使用echarts的頁面ts文件中引用echarts

import * as echarts from 'echarts'; 

4.在html頁面添加div

<ion-content> 
    <div id="chart"></div> 
</ion-content> 

5.在scss中配置樣式

page-home { 
    #chart { 
        position: absolute;
        width: 100%; 
        height: 100%; 
    }
} 

6.在ts文件中初始化

ionViewDidEnter() {
    const ec = echarts as any;
    const container = document.getElementById('chart');
    const chart = ec.init(container);
    chart.setOption({
      series: {
        type: 'pie',
        data: [{
          name: 'A', value: 10
        }, {
          name: 'B', value: 20
        }, {
          name: 'C', value: 30
        }]
      }
    });
  }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM