ECharts html sample code
2024. 2. 19. 23:00
ECharts html sample code
EChars 를 html 파일을 이용해 그리고 싶을 때 아래 코드를 이용하면
간단히 테스트 해 볼수 있습니다.
예제 코드 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 1단계: ECharts 설치하기 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<!-- 2단계: DOM 컨테이너 준비하기: 너비(width), 높이(height) 설정하기 -->
<div id="main" style="width: 800px;height:600px;"></div>
<!-- 3단계: 초기화 및 차트 옵션 설정하기 -->
<script type="text/javascript">
// 3-1. 준비한 DOM 컨테이너에서 echarts 초기화하기
let myChart = echarts.init(document.getElementById('main'))
// 3-2. 차트 옵션 작성하기
let option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 2,
data: [
[10.0, 8.04],[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[14.0, 8.96],[12.5, 6.82],
[9.15, 7.2],[11.5, 7.2],[3.03, 4.23],[12.2, 7.83],[2.02, 4.47],[1.05, 3.33],[4.05, 4.96],[6.03, 7.24],[12.0, 6.26],[12.0, 8.84],
[38.18,26.2],[34.93,39.17],[7.25,24.43],[2.39,33.45],[34.91,32.6],[24.17,16.28],[8.71,38.26],[38.14,10.56],[1.74,30.07],[17.68,12.18],
],
type: 'scatter'
}
]
}
// 3-3. 차트 옵션 설정하기
myChart.setOption(option)
</script>
</body>
</html>
반응형
'코딩 > ECharts' 카테고리의 다른 글
| ECharts 에서 datatables 라이브러리를 이용해 DataView 가상화 처리하기 (0) | 2024.07.01 |
|---|---|
| ECharts 에 바인딩 된 dataset source 내용 DataView 에 표시하기 (0) | 2024.07.01 |
| ECharts 스크립트 테스트 해볼 수 있는 사이트 (0) | 2024.02.20 |
| ECharts Blazor에서 사용하기 (0) | 2024.02.20 |
| ECharts Canvas Renderer 에서 10000 point 찍을 때 오류 (0) | 2024.02.19 |
