Ionic4/Angular8项目中使用echarts

╰半夏微凉° 2023-07-13 13:38 6阅读 0赞

### Ionic4/Angular8项目中使用echarts ###

*  1、安装echarts包、ngx-charts包
 *  2、angular.json中引入echart.js文件
 *  3、在使用echarts的模块中导入NgxEchartsModule
 *  4、页面中是用echarts
 *   *  4.1 HTML页中的代码
     *  4.2 页面的ts代码

在使用Angular开发Ionic项目的时候，是需要引入ngx-charts来使用echarts的。

# 1、安装echarts包、ngx-charts包 #

npm install echarts --save
    npm install ngx-echarts --save

# 2、angular.json中引入echart.js文件 #

"scripts": [ "node_modules/echarts/dist/echarts.js"  ]

# 3、在使用echarts的模块中导入NgxEchartsModule #

import {  NgxEchartsModule } from 'ngx-echarts';
    
    imports: [ NgxEchartsModule ]

# 4、页面中是用echarts #

## 4.1 HTML页中的代码 ##

<div echarts [options]="options" class="echarts" style="height:320px;"></div>

## 4.2 页面的ts代码 ##

import {  Component, OnInit } from '@angular/core'
    
    @Component({ 
      selector: 'app-rubber-product-chart',
      templateUrl: './rubber-product-chart.page.html',
      styleUrls: ['./rubber-product-chart.page.scss'],
    })
    export class RubberProductChartPage implements OnInit { 
      options: any = { 
          title: { 
              text: 'ECharts 入门示例'
          },
          tooltip: { },
          legend: { 
              data:['销量']
          },
          xAxis: { 
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: { },
          series: [{ 
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };   //echart图表选项
              
      constructor() {  }
    
      ngOnInit() { 
        
      }
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 Ionic4/Angular8项目中使用echarts

Ionic4/Angular8项目中使用echarts 1、安装echarts包、ngx-charts包 2、angular.json中引入echart.js

╰半夏微凉°/ 2023年07月13日 13:38/ 0 赞/ 7 阅读

相关 ionic4+angular8+动态设置首页

我采用最原始最简单的方案，直接指定刷新后访问的实际URL，不动态操作angular路由。访问URL示例： [http://localhost:8100/\/tabs/ma

快来打我*/ 2023年07月10日 14:26/ 0 赞/ 12 阅读

相关 angular 学习（ionic）

创建模块（在特定的文件夹下） ionic g page (中间后缀) eg：client.page.ts ?name/path of page:main/

男娘i/ 2022年10月01日 08:58/ 0 赞/ 145 阅读

相关 angular中怎么使用echarts

这是我第一写angular项目的时候写的文档现在重新整理一下分享出来首先我们我们要有一个容器 <div e-chart e-data="option4" styl

末蓝、/ 2022年09月26日 15:58/ 0 赞/ 142 阅读

相关 Angular4+ echarts

【前言】最近接到了一个任务就是把前端的表格改成echarts折线图的样式。【过程】 1.添加插件 echart cnpm install echarts --sa

怼烎@/ 2022年04月22日 11:26/ 0 赞/ 219 阅读

相关 ionic4中ionic native的基本使用

ionic官网 [https://ionicframework.com/][https_ionicframework.com] ![在这里插入图片描述][waterm

谁践踏了优雅/ 2021年12月12日 03:05/ 0 赞/ 354 阅读

相关 ionic3、Angular4 定时器的使用

// 声明变量 applicationInterval:any; // 定时器 // 使用定时器，每秒执行一次 ionViewDidEnter(){ let that

港控/mmm°/ 2021年11月11日 00:54/ 0 赞/ 343 阅读

相关 angular7中使用echarts

安装依赖建议使用cnpm 安装，直接使用npm可能会报错 cnpm install echarts --save cnpm install ngx-e

心已赠人/ 2021年10月18日 15:28/ 0 赞/ 512 阅读

相关 Angular使用ngx-echarts加载Echarts

前言之前写过通过自定义指令实现在angular加载echarts，今天在npm上发现了ngx-echarts，可以方便的加载echarts3，其实现也是通过自定

末蓝、/ 2021年09月16日 07:08/ 0 赞/ 746 阅读

相关 angular ionic

在实际中开发，在开发中学习 1.track by $index 的作用用于解决数字重复问题（id重复问题）； 2.ng-model 用于数据绑定（可重复使用传） 3.n

拼搏现实的明天。/ 2021年06月24日 15:58/ 0 赞/ 419 阅读