Apache ECharts 棒グラフ入門｜縦棒・横棒の実装からボタン切り替えまで

/* ===============================
   切り替えボタンエリア
   =============================== */
.chart-switcher {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .chart-switcher {
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .chart-switcher {
    gap: 15px;
  }
}

/* ボタンの基本スタイル */
.chart-tab {
  display: block;
  position: relative;
  border: none;
  border-radius: 5px;
  padding: 15px 0;
  background: #c11a51;
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  appearance: none;
  transition: background-color 300ms, color 300ms;
}

@media (min-width: 768px) {
  .chart-tab {
    width: 200px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .chart-tab {
    flex: 1;
    width: 100%;
    font-size: 15px;
  }
}

/* 選択中ボタンの下に表示する三角形 */
.chart-tab::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 15px;
  height: 12px;
  background: #f9e8ed;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 300ms;
}

/* ホバー時（PCのみ） */
@media (min-width: 768px) {
  .chart-tab:hover {
    background: #890631;
  }
}

/* 選択中のボタン */
.chart-tab.is-active {
  background: #f9e8ed;
  color: #c11a51;
  pointer-events: none;
}

/* アクティブ時だけ三角を表示 */
.chart-tab.is-active::before {
  opacity: 1;
}

/* ===============================
   グラフエリア
   =============================== */
@media (min-width: 768px) {
  .echarts-container {
    height: 400px; /* PCのチャート高さ */
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .echarts-container {
    height: 300px; /* SPのチャート高さ */
    margin-top: 30px;
  }
}

/* プレースホルダー（グラフ描画前の表示） */
.chart-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 5px;
  background-color: rgba(68, 102, 206, 0.09);
  text-align: center;
}

.chart-placeholder-text {
  color: #31345e;
  font-weight: 700;
  line-height: 1.6;
  opacity: 0.5;
}

@media (min-width: 768px) {
  .chart-placeholder-text {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  .chart-placeholder-text {
    font-size: 20px;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const btnService = document.getElementById('serviceChartBtn');
  const btnBlog = document.getElementById('blogChartBtn');
  const chartDom = document.getElementById('echartsContainer');

  // コンテナが存在しない場合は処理を止める（エラー防止）
  if (!chartDom) return;

  let myChart = null;

  // 2つのグラフで共通する設定をまとめたベースoption
  const baseOption = {
    // グラフ全体の文字スタイル
    textStyle: {
      color: '#333',
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 12,
      fontWeight: 300
    },
    // 凡例
    legend: {
      itemGap: 20,
      itemWidth: 16,
      itemHeight: 12,
      selectedMode: false
    },
    // グラフエリアの余白（containLabel: trueで軸ラベルがはみ出さないようにする）
    grid: {
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true
    },
    // ツールチップ（ホバー時の情報表示）
    tooltip: {
      trigger: 'axis',
      valueFormatter: (value) => `${value.toLocaleString()} PV`,
      textStyle: {
        color: '#333',
        fontFamily: '"Noto Sans JP", sans-serif',
        fontSize: 12,
        fontWeight: 300
      },
      padding: 15
    },
    // 横軸：流入経路のラベルを並べる（dataはmedia側で幅ごとに指定）
    xAxis: {
      type: 'category',
    },
    // 縦軸：数値の目盛りを自動生成
    yAxis: {
      type: 'value'
    },
    // チャートの幅に応じてレイアウトを切り替え
    media: [
      {
        // PC幅
        query: { minWidth: 740 },
        option: {
          title: {
            textStyle: { fontSize: 18 }
          },
          legend: { top: 5, right: 0 },
          grid: { top: 55 },
          xAxis: {
            axisLabel: { rotate: 0 },
            data: ['オーガニック検索', 'SNS', '参照元', '直接', 'その他']
          }
        }
      },
      {
        // スマホ幅：ラベルを斜め表示 & 長いラベルを短縮
        query: { maxWidth: 739 },
        option: {
          title: {
            textStyle: { fontSize: 16 }
          },
          legend: { top: 40, left: 0 },
          grid: { top: 85 },
          xAxis: {
            axisLabel: { rotate: 45 },
            data: ['オーガニック', 'SNS', '参照元', '直接', 'その他']
          }
        }
      }
    ]
  };

  // サービス紹介ページのグラフoption（baseOptionに差分を追加）
  const optionService = {
    ...baseOption,
    title: {
      text: 'サービス紹介ページ 流入経路別アクセス数',
      top: 0,
      left: 0
    },
    series: [
      {
        name: '今月',
        type: 'bar',
        data: [1320, 580, 430, 310, 180],
        itemStyle: { color: '#c11a51' },
        emphasis: { focus: 'series' } // ホバー時にこの系列を強調
      },
      {
        name: '先月',
        type: 'bar',
        data: [1080, 470, 460, 280, 150],
        itemStyle: { color: '#4466ce' },
        emphasis: { focus: 'series' }
      }
    ],
  };

  // ブログ記事ページのグラフoption（baseOptionに差分を追加）
  const optionBlog = {
    ...baseOption,
    title: {
      text: 'ブログ記事ページ 流入経路別アクセス数',
      top: 0,
      left: 0
    },
    series: [
      {
        name: '今月',
        type: 'bar',
        data: [2140, 980, 310, 220, 130],
        itemStyle: { color: '#c11a51' },
        emphasis: { focus: 'series' }
      },
      {
        name: '先月',
        type: 'bar',
        data: [1860, 750, 340, 200, 110],
        itemStyle: { color: '#4466ce' },
        emphasis: { focus: 'series' }
      }
    ]
  };

  // グラフを描画し、押したボタンをアクティブにする関数
  function showChart(optionToSet, activeBtn) {
    // まだ初期化していない場合のみecharts.init()を呼ぶ（二重初期化防止）
    if (!myChart) {
      myChart = echarts.init(chartDom);
    }
    // 第2引数のtrueで前の設定を残さず新しいoptionに切り替える
    myChart.setOption(optionToSet, true);

    // ボタンのアクティブ状態を切り替える
    [btnService, btnBlog].forEach(btn => btn.classList.remove('is-active'));
    activeBtn.classList.add('is-active');
  }

  btnService.addEventListener('click', () => showChart(optionService, btnService));
  btnBlog.addEventListener('click', () => showChart(optionBlog, btnBlog));

  // 画面サイズ変更時にグラフを再描画（描画済みの場合のみ）
  window.addEventListener('resize', () => {
    if (myChart) myChart.resize();
  });
});