Graph 그리기

D A S H B O A R D

Hyeon-Stone

D E V E L O P

S E C U R I T Y

ECharts

Echarts Impot

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
JavaScript
복사

Circle

<div id="circle" style="min-height: 205px;"></div>
HTML
복사

var myCircle = echarts.init(document.getElementById('circle')); // echarts init 메소드로 id=chart인 DIV에 차트 초기화
    option = {
        tooltip: {
            trigger: 'item'
        },
        legend : {
            top : 5,
            type : 'scroll'
        },
        series: [
            {
                name: 'Test 유형',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 0
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: svc['service_unit'], name: '서비스 단위테스트' },
                    { value: svc['service_inte'], name: '서비스 통합테스트' },
                    { value: svc['server_unit'], name: '서버 단위테스트' },
                    { value: svc['server_inte'], name: '서버 통합테스트' },
                ]
            }
        ]
    };
    myCircle.setOption(option); // 차트 디스플레이
		$(function(){
			  $(window).on('resize',function(){
			      myCircle.resize();
			
			  })
			})
JavaScript
복사

Line Chart

<div id="canvas" style="min-height: 205px;"></div>
HTML
복사

var date = {};
    for(var i = 0; i < svc.length; i++){
        if(!(svc[i].timestamp.substr(5,5) in date)){
            date[svc[i].timestamp.substr(5,5)] = 1;
        }
        else{
            date[svc[i].timestamp.substr(5,5)]++;
        }
    }
    var myChart = echarts.init(document.getElementById('canvas'),null,{
        height : "205px",
    }); // echarts init 메소드로 id=chart인 DIV에 차트 초기화
    option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: Object.keys(date)
        },
        yAxis: {
            type: 'value'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
            }
        },
        series: [
            {
                data: Object.values(date),
                type: 'line',
								smooth:true,
                areaStyle: {}
								areaStyle: {
										color : '#E0EBFF',
	                  fontWeight : 1000,
	                  fontsize : 1000,
	              },
            }
        ]
    };
    myChart.setOption(option); // 차트 디스플레이
		$(function(){
		  $(window).on('resize',function(){
		      myChart.resize();
		
		  })
		})
JavaScript
복사

Graph 그리기

ECharts

Circle

Line Chart

JQuery를 이용해 직접 원형 그래프 그리기