Angular4记账webApp练手项目之四(在Angular4项目中用echarts绘制图表)

前台源码

前言

例子基于之前文章开发。 用angular的思想之一,数据驱动,页面上的一切变化我们都用数据变化来控制,页面只需要绑定数据,然后我们操作数据。 echarts的更多用例可以参考官网。 echarts-ng2官网:https://twp0217.github.io/echarts-ng2/#/documentation

安装

npm install echarts --save

npm install echarts-ng2 --save

引用

在app.module.ts 中引用

import { EchartsNg2Module } from 'echarts-ng2';
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    WeUIModule,
    EchartsNg2Module ,
    RouterModule.forRoot(ROUTES)
  ],

使用

在count-year.component.ts中添加一些数据项

import { EChartOption } from 'echarts-ng2';
export class CountYearComponent implements OnInit {

  // 饼图的配置
  chartOption: EChartOption;
  // 参考官网的配置项
  lineOption: EChartOption ;

  constructor() {

  }

  ngOnInit() {
    // 创建一些模拟数据
    this.chartOption = this.createChart([{name: '宠物', value: 37}, {name: '工具', value: 222}, {name: '孩子', value: 4466}])
    const x = ['1月', '3月', '4月', '5月', '6月'];
    const y = [1000, 1300, 2045, 2780, 2400, 4310];
    this.lineOption = this.createLine(x, y, '1000');

  }
// 画饼图
  private createChart(data: any[]): EChartOption {
    return {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [
        {
          name: '消费',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: data
        }
      ]
    };
  }
// 画折线图
  private createLine(x, y, title: string): EChartOption {
    return {
      title: {
        text: title,
        subtext: '单位(元)',
        x: 'right'
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {x: 12, y: 10, x2: 12, y2: 30, borderWidth: 0},
      xAxis: [
        {
          splitLine: {show: false},
          type: 'category',
          boundaryGap: false,
          data: x
        }
      ],
      yAxis: [
        {
          show: false,
          type: 'value'
        }
      ],
      series: [
        {
          name: '消费',
          type: 'line',
          center: ['10%', '10%'],
          smooth: true,
          itemStyle: {normal: {areaStyle: {type: 'default'}}},
          data: y
        },
      ]
    };
  }
}

页面里添加图表元素

<div class="weui-panel__hd">
  <echarts-ng2 [option]="lineOption" [style]="{'width': '100%', 'height': '300px', 'display': 'inline-block'}"></echarts-ng2>
</div>
<div class="weui-panel__hd">
  <echarts-ng2 [option]="chartOption" [style]="{'width': '100%', 'height': '300px', 'display': 'inline-block'}"></echarts-ng2>
</div>

这里写图片描述

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏醒者呆

程序员必备课程——网络编程入门

关键字:互联网协议,网络分层,socket,TCP/IP协议,jdk源码,多线程,线程池,ExecutorService 本文的主要目的是面向程序员,所以...

58260
来自专栏linjinhe的专栏

LevelDB:写操作

其中,Put 和 Delete 的实现都是通过封装 Write 来实现的,函数调用关系如下:

35840
来自专栏全栈数据化营销

用python爬取qq空间说说

环境:PyCharm+Chorme+MongoDB Window10 爬虫爬取数据的过程,也类似于普通用户打开网页的过程。所以当我们想要打开浏览器去获取好友空间...

985130
来自专栏公众号_薛勤的博客

深入理解跨域SSO原理与技术

​ SSO英文全称Single Sign On,单点登录。SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登...

22810
来自专栏王二麻子IT技术交流园地

二、VueJs 填坑日记之基础项目构建

在上一篇文章中,大致介绍了一下本系列博文以及学习vuejs我们需要了解的一些概念,希望大家认真阅读,所谓知己知彼,百战百胜,学习也一样,工欲善其事,必先利其器,...

22070
来自专栏张善友的专栏

Service Fabric 与 Ocelot 集成

云应用程序通常都需要使用前端网关,为用户、设备或其他应用程序提供同一个入口点。 在 Service Fabric 中,网关可以是任意无状态服务(如 ASP.NE...

25930
来自专栏Hadoop数据仓库

Oracle 高级数据复制(Advanced Replication)

一、试验环境: A机:IP:10.1.8.201      OS:WindowsServer 2003 Standard Edition SP1;      D...

19860
来自专栏成长道路

用oozie命令行的方式在yarn上运行spark任务

注意:杀死yarn进程的命令 yarn application -kill applicationID 1.做这个实验之前你的服务器上最好装了cdh集群,以及添...

40100
来自专栏黒之染开发日记

webstorm/phpstorm 配置白鹭引擎快捷键编译TypeScript

3、 选择与截图中一致,或者选你看得懂的选项,这里是说要侦听的ts文件位于哪里,图片中的选项表示整个项目中的ts文件

27230
来自专栏农夫安全

浅谈XXE攻击

前言 现在越来越多主要的web程序被发现和报告存在XXE(XML External Entity attack)漏洞,比如说facebook、paypal等等。...

35660

扫码关注云+社区

领取腾讯云代金券