今天我們要來使用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