웹 개발

Javascript Apache ECharts

Dev_jihoon8730 2025. 5. 21. 22:27

JS를 사용하는 프론트 개발자들이 한번 쯤 들어봤을 유명한 차트 라이브러리인 echarts를 회사 요구사항에 맞춰 사용해 보았다 그 중  line chart를 만들어 보았다 다양한 차트의 종류는 공식 doc를 통해 확인 할 수 있다

 

https://echarts.apache.org/examples/en/index.html

 

Examples - Apache ECharts

 

echarts.apache.org

 

 

Javascript

<!DOCTYPE html>
<html>
<head>
    <title>Line Chart Example</title>
    <!-- ECharts CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 차트를 표시할 div 요소 -->
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // ECharts 초기화 및 차트 설정
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        var option;

        // 차트 데이터 설정 (예: x축과 y축 데이터)
        var xAxisData = ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06'];
        var seriesData = [150, 230, 224, 218, 135, 147];

        // 옵션 설정
        option = {
            xAxis: {
                type: 'category',
                data: xAxisData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: seriesData,
                type: 'line'
            }]
        };

        // 옵션을 설정하고 차트 렌더링
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>
</html>

 

LINE CHART 예시

React

install

npm install echarts echarts-for-react

 

LineChart.js

// LineChart.js
import React from 'react';
import ReactECharts from 'echarts-for-react';

const LineChart = () => {
  const option = {
    title: {
      text: '월별 매출'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '매출',
        data: [150, 230, 224, 218, 135, 147],
        type: 'line',
        smooth: true
      }
    ]
  };

  return (
    <div style={{ width: '100%', height: '400px' }}>
      <ReactECharts option={option} style={{ height: '100%' }} />
    </div>
  );
};

export default LineChart;

 

App.js

// App.js
import React from 'react';
import LineChart from './LineChart';

function App() {
  return (
    <div className="App">
      <h2>라인 차트 예제</h2>
      <LineChart />
    </div>
  );
}

export default App;

 

이를 통해 만든어본 Rainbow chart

 

직접 사용해 보니 다양한 옵션을 제공 하는것도 장점 이지만 차트 라이브러리의 단점인 커스텀의 자유도가 어느정도 보장되어 있는거 같아 앞으로 유용하게 사용할 수 있을거 같다