ionic 引入Echarts

最新推荐文章于 2020-12-15 10:27:07 发布

changzhengcome

最新推荐文章于 2020-12-15 10:27:07 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic

本文链接：https://blog.youkuaiyun.com/changzhengcome/article/details/79163992

ionic 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在项目中集成ECharts图表库，包括下载并导入echarts.min.js文件、在index.html中正确引用该文件、设置div元素作为图表容器以及在TypeScript中初始化和配置图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）.导入文件。把下载的echarts.min.js 文件放在src\assets\js 目录下。
2).script 引用。在项目的index.html中引入js文件。(切记不是www下的文件) 
      <script src="assets/js/echarts.min.js"></script>  
放在<script src="cordova.js"></script> 之下
3).在page页面引用和使用。
<ion-content padding>  
<div #container1 class="div-charts"></div>
</ion-content>
css中设置width：100%   height：100%；
4）.ts中
declare var echarts;//js echarts全局对象  
@ViewChild('container1') container:ElementRef;//与html中div #container1对应   
 chart :any; 
  ionViewDidLoad() { 
    let ctx = this.container.nativeElement;  
     this.chart = echarts.init(ctx);  
     this.chart.setoption(); }