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: 380px; /* 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;

  // 流入経路のカテゴリ（両グラフ共通）
  const categories = ['オーガニック検索', 'SNS', '参照元', '直接', 'その他'];

  // 各ページのアクセス数（categoriesと同じ順序で並べる）
  const serviceValues = [1320, 580, 430, 310, 180];
  const blogValues    = [2140, 980, 310, 220, 130];

  // categoriesとvaluesを組み合わせて、円グラフ用の { name, value } 配列を作るヘルパー
  function buildPieData(values) {
    return categories.map((name, i) => ({ name, value: values[i] }));
  }

  const serviceData = buildPieData(serviceValues);
  const blogData    = buildPieData(blogValues);

  // 凡例に「カテゴリ名：値 PV（パーセント）」を表示するためのフォーマッタ生成関数
  function createLegendFormatter(data) {
    const total = data.reduce((sum, item) => sum + item.value, 0);
    return (name) => {
      const item = data.find(d => d.name === name);
      if (!item) return name;
      const percent = ((item.value / total) * 100).toFixed(2);
      return `${name}：${item.value.toLocaleString()} PV（${percent}%）`;
    };
  }

  // 2つのグラフで共通する設定をまとめたベースoption
  const baseOption = {
    // 円グラフの各スライスに使う色（dataの順番に適用される）
    color: ['#c11a51', '#4466ce', '#f9d77a', '#93c98c', '#c9cde0'],
    // グラフ全体の文字スタイル
    textStyle: {
      color: '#333',
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 14,
      fontWeight: 300
    },
    // 凡例の共通設定（表示・非表示や向きはmedia側で切り替え）
    legend: {
      itemGap: 12,
      itemWidth: 16,
      itemHeight: 12,
      selectedMode: false
    },
    // ツールチップ（ホバー時・タップ時の情報表示）
    tooltip: {
      trigger: 'item',
      formatter: (params) =>
        `${params.name}<br>${params.value.toLocaleString()} PV（${params.percent}%）`,
      textStyle: {
        color: '#333',
        fontFamily: '"Noto Sans JP", sans-serif',
        fontSize: 12,
        fontWeight: 300
      },
      padding: 15
    },
    // チャートの幅に応じてレイアウトを切り替え
    media: [
      {
        // PC幅：凡例を非表示、円グラフを中央配置、タイトルは大きめのフォントサイズ
        query: { minWidth: 740 },
        option: {
          title: {
            textStyle: { fontSize: 18 }
          },
          legend: { show: false },
          tooltip: { show: true },
          series: [{
            radius: '70%',
            center: ['50%', '230px'],
            label: {
              show: true,
              formatter: '{b}\n{d}%',
              lineHeight: 19
            }
          }]
        }
      },
      {
        // スマホ幅：凡例を縦並びで下に、ホバー動作は無効化、タイトルは小さめのフォントサイズ
        query: { maxWidth: 739 },
        option: {
          title: {
            textStyle: { fontSize: 16 }
          },
          legend: {
            show: true,
            orient: 'vertical',
            bottom: 0,
            left: 'center'
          },
          // スマホはタップ操作のため、ツールチップも非表示
          tooltip: { show: false },
          series: [{
            radius: '55%',
            center: ['50%', '140px'],
            label: { show: false },
            // スマホはタップ操作のため、ホバー時のハイライト動作を無効化
            emphasis: { disabled: true }
          }]
        }
      }
    ]
  };

  // サービス紹介ページのグラフoption（baseOptionに差分を追加）
  const optionService = {
    ...baseOption,
    title: {
      text: 'サービス紹介ページ 流入経路別アクセス数',
      top: 0,
      left: 'center'
    },
    legend: {
      ...baseOption.legend,
      formatter: createLegendFormatter(serviceData)
    },
    series: [{
      name: '流入経路',
      type: 'pie',
      data: serviceData,
      labelLine: { show: true },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      }
    }]
  };

  // ブログ記事ページのグラフoption（baseOptionに差分を追加）
  const optionBlog = {
    ...baseOption,
    title: {
      text: 'ブログ記事ページ 流入経路別アクセス数',
      top: 0,
      left: 'center'
    },
    legend: {
      ...baseOption.legend,
      formatter: createLegendFormatter(blogData)
    },
    series: [{
      name: '流入経路',
      type: 'pie',
      data: blogData,
      labelLine: { show: true },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      }
    }]
  };

  // グラフを描画し、押したボタンをアクティブにする関数
  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();
  });
});

media: [
  {
    query: { minWidth: 740 },
    option: {
      title: { textStyle: { fontSize: 18 } },
      legend: { show: false },
      tooltip: { show: true },
      series: [{
        radius: '70%',
        center: ['50%', '230px'],
        label: {
          show: true,
          formatter: '{b}\n{d}%',
          lineHeight: 19
        }
      }]
    }
  },
  {
    query: { maxWidth: 739 },
    option: {
      title: { textStyle: { fontSize: 16 } },
      legend: {
        show: true,
        orient: 'vertical',
        bottom: 0,
        left: 'center'
      },
      tooltip: { show: false },
      series: [{
        radius: '55%',
        center: ['50%', '140px'],
        label: { show: false },
        emphasis: { disabled: true }
      }]
    }
  }
]

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

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

  let myChart = null;

  // 流入経路のカテゴリ（両グラフ共通）
  const categories = ['オーガニック検索', 'SNS', '参照元', '直接', 'その他'];

  // 各ページのアクセス数（categoriesと同じ順序で並べる）
  const serviceValues = [1320, 580, 430, 310, 180];
  const blogValues    = [2140, 980, 310, 220, 130];

  // categoriesとvaluesを組み合わせて、ドーナツグラフ用の { name, value } 配列を作るヘルパー
  function buildPieData(values) {
    return categories.map((name, i) => ({ name, value: values[i] }));
  }

  const serviceData = buildPieData(serviceValues);
  const blogData    = buildPieData(blogValues);

  // 凡例に「カテゴリ名：値 PV（パーセント）」を表示するためのフォーマッタ生成関数
  function createLegendFormatter(data) {
    const total = data.reduce((sum, item) => sum + item.value, 0);
    return (name) => {
      const item = data.find(d => d.name === name);
      if (!item) return name;
      const percent = ((item.value / total) * 100).toFixed(2);
      return `${name}：${item.value.toLocaleString()} PV（${percent}%）`;
    };
  }

  // ドーナツ中央のテキスト（「合計」＋数値）を生成するヘルパー
  // viewport（PC/SP）ごとに位置とフォントサイズが変わるため、完全な定義で返す
  function buildCenterText(data, isPC) {
    const total = data.reduce((sum, item) => sum + item.value, 0);
    return [
      // 「合計」のラベル（上の小さい行）
      {
        type: 'text',
        left: 'center',
        top: isPC ? 205 : 120,
        style: {
          text: '合計',
          fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: isPC ? 14 : 12,
          fontWeight: 300,
          fill: '#333',
          textAlign: 'center'
        }
      },
      // 合計値（下の大きい行）
      {
        type: 'text',
        left: 'center',
        top: isPC ? 230 : 140,
        style: {
          text: `${total.toLocaleString()} PV`,
          fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: isPC ? 24 : 20,
          fontWeight: 700,
          fill: '#333',
          textAlign: 'center'
        }
      }
    ];
  }

  // mediaを生成するヘルパー（PC/SPそれぞれ、graphicは完全な定義で含める）
  // graphicの内容がdataに依存するため、media自体もデータごとに作る
  function buildMedia(data) {
    return [
      {
        // PC幅：凡例を非表示、ドーナツグラフを中央配置、タイトルは大きめのフォントサイズ
        query: { minWidth: 740 },
        option: {
          title: { textStyle: { fontSize: 18 } },
          legend: { show: false },
          tooltip: { show: true },
          series: [{
            // ドーナツ：内側40%, 外側70%
            radius: ['40%', '70%'],
            center: ['50%', '230px'],
            label: {
              show: true,
              formatter: '{b}\n{d}%',
              lineHeight: 19
            }
          }],
          graphic: buildCenterText(data, true)
        }
      },
      {
        // スマホ幅：凡例を縦並びで下に、ホバー動作は無効化、タイトルは小さめのフォントサイズ
        query: { maxWidth: 739 },
        option: {
          title: { textStyle: { fontSize: 16 } },
          legend: {
            show: true,
            orient: 'vertical',
            bottom: 0,
            left: 'center'
          },
          // スマホはタップ操作のため、ツールチップも非表示
          tooltip: { show: false },
          series: [{
            // ドーナツ：内側35%, 外側55%
            radius: ['35%', '55%'],
            center: ['50%', '140px'],
            label: { show: false },
            // スマホはタップ操作のため、ホバー時のハイライト動作を無効化
            emphasis: { disabled: true }
          }],
          graphic: buildCenterText(data, false)
        }
      }
    ];
  }

  // 2つのグラフで共通する設定をまとめたベースoption（mediaはoption側で生成）
  const baseOption = {
    // ドーナツの各スライスに使う色（dataの順番に適用される）
    color: ['#c11a51', '#4466ce', '#f9d77a', '#93c98c', '#c9cde0'],
    // グラフ全体の文字スタイル
    textStyle: {
      color: '#333',
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 14,
      fontWeight: 300
    },
    // 凡例の共通設定（表示・非表示や向きはmedia側で切り替え）
    legend: {
      itemGap: 12,
      itemWidth: 16,
      itemHeight: 12,
      selectedMode: false
    },
    // ツールチップ（ホバー時・タップ時の情報表示）
    tooltip: {
      trigger: 'item',
      formatter: (params) =>
        `${params.name}<br>${params.value.toLocaleString()} PV（${params.percent}%）`,
      textStyle: {
        color: '#333',
        fontFamily: '"Noto Sans JP", sans-serif',
        fontSize: 12,
        fontWeight: 300
      },
      padding: 15
    }
  };

  // サービス紹介ページのグラフoption（baseOptionに差分を追加）
  const optionService = {
    ...baseOption,
    title: {
      text: 'サービス紹介ページ 流入経路別アクセス数',
      top: 0,
      left: 'center'
    },
    legend: {
      ...baseOption.legend,
      formatter: createLegendFormatter(serviceData)
    },
    series: [{
      name: '流入経路',
      type: 'pie',
      data: serviceData,
      labelLine: { show: true },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      }
    }],
    // PC/SPそれぞれの上書きとドーナツ中央テキスト（合計＋数値）を含む
    media: buildMedia(serviceData)
  };

  // ブログ記事ページのグラフoption（baseOptionに差分を追加）
  const optionBlog = {
    ...baseOption,
    title: {
      text: 'ブログ記事ページ 流入経路別アクセス数',
      top: 0,
      left: 'center'
    },
    legend: {
      ...baseOption.legend,
      formatter: createLegendFormatter(blogData)
    },
    series: [{
      name: '流入経路',
      type: 'pie',
      data: blogData,
      labelLine: { show: true },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      }
    }],
    // PC/SPそれぞれの上書きとドーナツ中央テキスト（合計＋数値）を含む
    media: buildMedia(blogData)
  };

  // グラフを描画し、押したボタンをアクティブにする関数
  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();
  });
});

function buildMedia(data) {
  return [
    {
      query: { minWidth: 740 },
      option: {
        title: { textStyle: { fontSize: 18 } },
        legend: { show: false },
        tooltip: { show: true },
        series: [{
          radius: ['40%', '70%'],
          center: ['50%', '230px'],
          label: { show: true, formatter: '{b}\n{d}%', lineHeight: 19 }
        }],
        graphic: buildCenterText(data, true)
      }
    },
    {
      query: { maxWidth: 739 },
      option: {
        title: { textStyle: { fontSize: 16 } },
        legend: { show: true, orient: 'vertical', bottom: 0, left: 'center' },
        tooltip: { show: false },
        series: [{
          radius: ['35%', '55%'],
          center: ['50%', '140px'],
          label: { show: false },
          emphasis: { disabled: true }
        }],
        graphic: buildCenterText(data, false)
      }
    }
  ];
}

function buildCenterText(data, isPC) {
  const total = data.reduce((sum, item) => sum + item.value, 0);
  return [
    {
      type: 'text',
      left: 'center',
      top: isPC ? 205 : 120,
      style: {
        text: '合計',
        fontFamily: '"Noto Sans JP", sans-serif',
        fontSize: isPC ? 14 : 12,
        fontWeight: 300,
        fill: '#333',
        textAlign: 'center'
      }
    },
    {
      type: 'text',
      left: 'center',
      top: isPC ? 230 : 140,
      style: {
        text: `${total.toLocaleString()} PV`,
        fontFamily: '"Noto Sans JP", sans-serif',
        fontSize: isPC ? 24 : 20,
        fontWeight: 700,
        fill: '#333',
        textAlign: 'center'
      }
    }
  ];
}