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
복사