ECharts에서 데이터 표시 문제 해결하기

최근 ECharts를 사용하여 차트를 구현하는 과정에서 특정 설정을 변경하면 막대 그래프가 표시되지 않는 문제가 발생했습니다. 특히, X축의 글꼴 색상을 수정한 후에 이 문제가 나타났으며, 이를 해결하기 위해 여러 시도를 거쳤습니다.

이 문제는 pnpm install echarts 명령어로 라이브러리를 설치한 이후에 발생했으며, 일부 코드를 추가하거나 수정할 때 특정 임포트 문구가 생성되는 것으로 보입니다. 아래와 같은 경우, 해당 임포트 문을 주석 처리하면 차트가 정상적으로 표시됩니다. 하지만 아직까지 왜 이런 문제가 발생하는지 정확히 파악하지 못했습니다. 더 나은 해결책을 아는 분들의 피드백을 기다리고 있습니다.

아래는 기본적인 HTML과 CSS, JavaScript 코드의 예제입니다.

index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>데이터 시각화</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <h1>데이터 시각화 - ECharts</h1>
    <div class="current-time">현재 시간:</div>
    <script>
      function updateTime() {
        const now = new Date();
        const formattedTime = `${now.getFullYear()}년 ${now.getMonth() + 1}월 ${now.getDate()}일 - 
          ${now.getHours()}시 ${now.getMinutes()}분 ${now.getSeconds()}초`;
        document.querySelector(".current-time").textContent = `현재 시간: ${formattedTime}`;
      }
      setInterval(updateTime, 1000);
    </script>
  </header>

  <section class="content-box">
    <div class="chart-container">
      <h2>막대 그래프 - 산업별 고용 현황</h2>
      <div class="bar-chart"></div>
    </div>
  </section>

  <script src="js/echarts.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
}

header {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.current-time {
  font-size: 14px;
  color: #ecf0f1;
}

.content-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.chart-container {
  width: 600px;
  height: 400px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.bar-chart {
  width: 100%;
  height: 100%;
}

main.js

(function () {
  const chart = echarts.init(document.querySelector(".bar-chart"));

  const options = {
    color: ["#1abc9c"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      bottom: "15%",
      top: "10%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["여행", "교육", "게임", "의료", "전자상거래", "소셜 미디어", "금융"],
        axisTick: { alignWithLabel: true },
        axisLabel: {
          textStyle: {
            color: "#7f8c8d",
            fontSize: 12,
          },
        },
        axisLine: { show: false },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "#7f8c8d",
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: "#bdc3c7",
            width: 1,
          },
        },
        splitLine: {
          lineStyle: {
            color: "#ecf0f1",
            width: 1,
          },
        },
      },
    ],
    series: [
      {
        name: "직접 방문",
        type: "bar",
        barWidth: "40%",
        data: [150, 200, 250, 300, 400, 350, 500],
        itemStyle: {
          borderRadius: 5,
        },
      },
    ],
  };

  chart.setOption(options);
})();

위의 코드는 기본적인 ECharts 설정을 보여줍니다. 문제 해결을 위해 필요한 부분만 수정하거나 제거하여 최종 결과물을 확인할 수 있습니다.

태그: ECharts JavaScript data-visualization

6월 26일 19:50에 게시됨

괴물 클럽

ECharts에서 데이터 표시 문제 해결하기

인기 태그