ionic+capacitor+echarts 使用报表模块

﹏ヽ暗。殇╰゛Y 2023-07-19 08:29 51阅读 0赞

官网地址  [https://www.echartsjs.com/zh/index.html][https_www.echartsjs.com_zh_index.html]

具体使用说明参考 [https://github.com/xieziyu/ngx-echarts][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'
      }]
    }

**页面显示**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70][]

[https_www.echartsjs.com_zh_index.html]: https://www.echartsjs.com/zh/index.html
[https_github.com_xieziyu_ngx-echarts]: https://github.com/xieziyu/ngx-echarts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbXJ0aWFu_size_16_color_FFFFFF_t_70]: /images/20230528/12f87260e8d64d68a2713ddbe96ff613.png

发表评论取消回复

表情：

评论列表（有 0 条评论，51人围观）

还没有评论，来说两句吧...

相关阅读

相关使用JasperReport报表工具，做出Java项目报表打印功能（三）

上一篇，链接点击这里][Link 1] 做出来的效果是这样的 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh...

悠悠/ 2024年04月18日 05:07/ 0 赞/ 92 阅读

相关使用JasperReport报表工具，做出Java项目报表打印功能（二）

上一篇，链接点击这里][Link 1] 做出来的效果是这样的 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha...

心已赠人/ 2024年04月18日 03:45/ 0 赞/ 95 阅读

相关使用JasperReport报表工具，做出Java项目报表打印功能（一）

**一：介绍** JasperReport是一个强大、灵活的报表生成工具，能够展示丰富的页面内容，并将之转换成PDF，HTML，或者XML格式。该库完全由Java写成...

秒速五厘米/ 2024年04月17日 23:13/ 0 赞/ 107 阅读

相关 ionic+capacitor+echarts 使用报表模块

官网地址 [https://www.echartsjs.com/zh/index.html][https_www.echartsjs.com_zh_index.html]

﹏ヽ暗。殇╰゛Y/ 2023年07月19日 08:29/ 0 赞/ 52 阅读

相关 rdlc报表的使用

RDLC报表的使用机房收费系统这是第三遍重构了，但每当到报表这块都是让我很纠结，这次合作开发亦是如此。在学习vb6时，使用的报表是第三方的Grid++Repo

我会带着你远行/ 2022年08月26日 04:52/ 0 赞/ 242 阅读

相关使用highChart做报表统计

下载Highcharts的包，导入到页面，这些都不用说了。直接来看代码的。这是页面代码： <%@ page language="java" contentType

Bertha 。/ 2022年08月11日 04:30/ 0 赞/ 211 阅读

相关 jasper报表工具的使用

1、新建Web工程； 2、导入Jar包（关于jasperReport的jar包，至少下面几个） commons-collections-3.1.jar commons-di

「爱情、让人受尽委屈。」/ 2022年06月16日 06:37/ 0 赞/ 528 阅读

相关 JFreeChart(报表图形引擎)的使用

前提：导入需要的2个jar文件，jcommon-版本号.jar,jfreechart-版本号.jar。可以去官网下载：[http://sourceforge.net/proje

ゝ一纸荒年。/ 2022年06月15日 22:56/ 0 赞/ 252 阅读

相关 python笔记系列：数据报表之Excel操作模块：XlsxWriter

定制业务质量报表详解数据报表之Excel操作模块： XlsxWriter pip install XlsxWriter easy\_install XlsxWriter

不念不忘少年蓝@/ 2022年05月28日 00:10/ 0 赞/ 314 阅读

相关使用 freemark 实现报表导出

使用 freemark 实现 office 文档生成文章目录使用 freemark 实现 office 文档生成 1 准备 excel 模板

分手后的思念是犯贱/ 2022年05月27日 08:10/ 0 赞/ 327 阅读