ionic+capacitor+echarts 使用报表模块

人生如游戏---

于 2020-03-30 15:19:36 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

分类专栏： Cordova | Ionic | angular

本文链接：https://blog.csdn.net/samrtian/article/details/105196577

Cordova | Ionic | angular 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在Ionic应用中结合Capacitor来集成并使用Echarts报表模块。首先提供了Echarts的官方网址和一个参考的GitHub项目，接着详细阐述了安装步骤和在模块中引入及定义文件内容的方法。

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

官网地址 https://www.echartsjs.com/zh/index.html

具体使用说明参考 https://github.com/xieziyu/ngx-echarts

安装方法

// 如果需要GL 3D地球模型数据的支持先安装
npm install echarts-gl -S
// 不需要的话直接安装如下
npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D

使用方法

1. 在要使用的模块中导入

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    NgxEchartsModule],
})

2. 文件内容定义

html:

<div echarts [options]="chartOption" class="demo-chart"></div>

scss:

.demo-chart {
  height: 400px;
}

ts:

import { EChartOption } from 'echarts';

// ...

chartOption: EChartOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
}

页面显示