美文网首页Angular学习实践
Angular4记账webApp练手项目之四(在Angular4

Angular4记账webApp练手项目之四(在Angular4

作者: 易兒善 | 来源:发表于2017-10-07 15:32 被阅读317次

    Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
    Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)
    Angular4记账webApp练手项目之三(在angular4项目中使用路由router)
    Angular4记账webApp练手项目之四(在Angular4项目中用echarts绘制图表)
    Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)
    前台源码

    前言

    例子基于之前文章开发。
    用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>
    
    这里写图片描述

    相关文章

      网友评论

        本文标题:Angular4记账webApp练手项目之四(在Angular4

        本文链接:https://www.haomeiwen.com/subject/sxmjyxtx.html