Angular Stock上市个股日成交(三)(Day29)

今天我们要来使用zingChart的套件产出视觉化的图表

首先我们先在daily-tranction-stock.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../service/http.service';
import { DailyTranctionStockData } from '../model/DailyTranctionStockData';


@Component({
  selector: 'app-daily-tranction-stock',
  templateUrl: './daily-tranction-stock.component.html',
  styleUrls: ['./daily-tranction-stock.component.css']
})
export class DailyTranctionStockComponent implements OnInit {
  gets: any;
  x_axis: string[] = [];
  y_axis: number[] = [];
  dailyTranctionStockDatas: DailyTranctionStockData[] = [];
  config: zingchart.graphset = {};
  token = sessionStorage.getItem('token') || '';




  constructor(
    private httpService: HttpService
  ) { }

  ngOnInit(): void {
    this.httpService.getGets(this.token, 'stock/search/exchange/getStockDayAll').subscribe(
      (response) => {
        this.gets = response;
        const data: Map<string, any> = new Map(Object.entries(response.data));
        this.dailyTranctionStockDatas = data.get('dailyTranctionStockDatas');
        let tmp_dailyTranctionStockDatas = this.dailyTranctionStockDatas.splice(0, 9);
        console.log(tmp_dailyTranctionStockDatas);
        
        #交易金额
        tmp_dailyTranctionStockDatas.forEach(element => this.y_axis.push(element.TradeValue));
        
        #个股名称
        tmp_dailyTranctionStockDatas.forEach(element => this.x_axis.push(element.Name));
        
			#设定档
				this.config = {
          type: 'bar',
          title: {
            'text': '证卷每日交易'
          },
          series: [
            {
              values: this.y_axis
            }
          ],
          scaleX: {
            values: this.x_axis
          }
        };
      }
    )
  }
}

daily-tranction-stock.component.html 放入zingChart模板

<zingchart-angular [config]="config" [height]="500" ></zingchart-angular>

接着就可以看到图片啦

好啦，经过漫长的29天之後我们终於成功

使用Spring Boot API & Angular显示出证交所资料了，

但这只是一个开始而已，zingChart还有很多套件可以使用，

剩下的就靠自己摸索啦~~

参考资料:

ZingChart文件-bar