こんにちは、JS2IIUです。
Streamlitではさまざまなグラフを表示するためのUI要素が準備されています。標準のUIでは物足りない場合にはインタラクティブなグラフが描画できるstreamlit-echartを試してみるのはどうでしょうか。今回もよろしくお願いします。
1. はじめに
StreamlitはPythonで簡単にWebアプリを作れる人気のフレームワークです。データの可視化も得意ですが、標準のst.line_chart()やst.bar_chart()では、インタラクティブなカスタムグラフには限界があります。
そこで登場するのが streamlit-echarts。このライブラリを使うことで、強力なチャートライブラリ「ECharts」をStreamlitで手軽に使えるようになります。
本記事では、streamlit-echartsの使い方を丁寧に解説し、折れ線グラフ・棒グラフ・レーダーチャートなど、実践的なグラフ作成方法をステップバイステップで紹介します。
2. streamlit-echartsとは？
streamlit-echartsは、Apache EChartsという高機能なJavaScript製チャートライブラリをStreamlitで使えるようにしたコンポーネントです。
✅ 主な特徴
- インタラクティブなグラフ（ホバー、ズーム、凡例切り替えなど）
- 折れ線・棒・円・レーダーなど多彩なチャートに対応
- JSON形式のオプション指定で柔軟にカスタマイズ可能
3. セットアップ方法
まずは、Python環境にstreamlit-echartsをインストールしましょう。
pip install streamlit-echartsすでにstreamlit本体がインストールされていない場合は、以下も実行してください。
pip install streamlit4. 最小構成のグラフを表示してみよう
まずは、Hello World的な折れ線グラフを表示してみましょう。
🔰 サンプルコード
import streamlit as st
from streamlit_echarts import st_echarts
st.title("最初のEChartsグラフ")
options = {
"xAxis": {
"type": "category",
"data": ["月", "火", "水", "木", "金"]
},
"yAxis": {
"type": "value"
},
"series": [{
"data": [820, 932, 901, 934, 1290],
"type": "line"
}]
}
st_echarts(options=options)
📝 解説
xAxis: 横軸（曜日をカテゴリとして表示）yAxis: 縦軸（数値）series: 折れ線グラフとして表示するデータ
このように、JSON形式でグラフの設定を渡すだけで簡単に描画できます。
5. 棒グラフとインタラクション要素の追加
次は、より実用的な棒グラフを作り、ツールチップや凡例を追加してみましょう。
🧪 サンプルコード
import streamlit as st
from streamlit_echarts import st_echarts
st.title("売上データの棒グラフ")
options = {
"tooltip": {"trigger": "axis"},
"legend": {"data": ["2023年", "2024年"]},
"xAxis": {
"type": "category",
"data": ["1月", "2月", "3月", "4月", "5月"]
},
"yAxis": {
"type": "value"
},
"series": [
{"name": "2023年", "type": "bar", "data": [500, 700, 800, 600, 900]},
{"name": "2024年", "type": "bar", "data": [600, 850, 950, 720, 1100]}
]
}
st_echarts(options=options, height="400px")
🔍 解説ポイント
"tooltip": マウスホバー時に値を表示"legend": グラフ上部の凡例切り替え"type": "bar": 棒グラフを指定
6. レーダーチャートで項目評価を可視化
EChartsではレーダーチャートも簡単に描けます。製品評価や自己分析などに便利です。
🎯 サンプルコード
import streamlit as st
from streamlit_echarts import st_echarts
st.title("レーダーチャートによる製品評価")
options = {
"tooltip": {},
"legend": {"data": ["製品A", "製品B"]},
"radar": {
"indicator": [
{"name": "性能", "max": 100},
{"name": "使いやすさ", "max": 100},
{"name": "デザイン", "max": 100},
{"name": "価格", "max": 100},
{"name": "サポート", "max": 100}
]
},
"series": [{
"name": "評価比較",
"type": "radar",
"data": [
{"value": [80, 90, 70, 60, 85], "name": "製品A"},
{"value": [70, 80, 85, 75, 90], "name": "製品B"}
]
}]
}
st_echarts(options=options, height="500px")
7. CSVファイルのデータをグラフで可視化
最後に、CSVファイルをアップロードし、その中のデータをグラフ化する実践例を紹介します。
📄 CSVの内容（例）
| 月 | 売上 |
|---|---|
| 1月 | 500 |
| 2月 | 700 |
| 3月 | 900 |
💻 サンプルコード
import streamlit as st
import pandas as pd
from streamlit_echarts import st_echarts
st.title("CSVファイルから棒グラフを作成")
uploaded_file = st.file_uploader("CSVファイルをアップロードしてください", type="csv")
if uploaded_file:
df = pd.read_csv(uploaded_file)
st.write("データの内容", df)
options = {
"xAxis": {
"type": "category",
"data": df["月"].tolist()
},
"yAxis": {
"type": "value"
},
"series": [{
"data": df["売上"].tolist(),
"type": "bar"
}]
}
st_echarts(options=options)読み込むCSVファイルのサンプルです：
月,売上
1月,120
2月,150
3月,170
4月,140
5月,190
6月,210
7月,250
8月,230
9月,200
10月,220
11月,240
12月,300
8. よくあるエラーとTips
❌ エラー1：xAxisやseriesの形式が正しくない
問題例：
options = {
"xAxis": {
"data": ["A", "B", "C"]
},
"series": [100, 200, 300] # ← 誤り！正しい形式ではない
}エラーメッセージ例（Streamlit上）
「TypeError: series[0].type is required」など
解決方法：
EChartsは明示的にグラフのtype（line, barなど）や、dataをオブジェクトとして渡す必要があります。
修正例：
options = {
"xAxis": {
"type": "category",
"data": ["A", "B", "C"]
},
"yAxis": {
"type": "value"
},
"series": [{
"type": "bar",
"data": [100, 200, 300]
}]
}❌ エラー2：Pandasのデータ型がEChartsと合わない
問題例：
df = pd.DataFrame({
"月": ["1月", "2月", "3月"],
"売上": [500, 600, 700]
})
# そのまま渡すと動かない
options = {
"xAxis": {"type": "category", "data": df["月"]},
"series": [{"type": "bar", "data": df["売上"]}]
}原因：
PandasのSeries型はEChartsが期待する**Pythonのリスト（list型）**ではありません。EChartsはlistやdict型で構成されたオプションを期待します。
修正例：
options = {
"xAxis": {"type": "category", "data": df["月"].tolist()},
"yAxis": {"type": "value"},
"series": [{"type": "bar", "data": df["売上"].tolist()}]
}❌ エラー3：データの長さが一致しない
問題例：
options = {
"xAxis": {
"type": "category",
"data": ["A", "B", "C"]
},
"series": [{
"type": "line",
"data": [10, 20] # ← 要素が2つしかなく、xAxisと不一致
}]
}結果：
EChartsの描画結果が正しく表示されなかったり、意図しないグラフになることがあります。
解決方法：xAxis["data"]とseries[n]["data"]のリストの長さを一致させる。
✅ Tip1：高さや幅を指定して表示を整える
EChartsは自動でサイズ調整してくれますが、Streamlitの表示領域に合わせて明示的にheightを設定することで表示崩れを防止できます。
st_echarts(options=options, height="400px", width="100%")✅ Tip2：テーマ変更やレスポンシブ対応も可能
streamlit-echartsはEChartsのテーマ指定や、レスポンシブ設計にも対応しています。
🎨 ダークテーマの例：
st_echarts(options=options, theme="dark")📱 レスポンシブ対応：
Streamlitのカラムレイアウトやcontainer内でも利用可能なので、ダッシュボード開発にも便利です。
✅ Tip3：複数グラフの表示も可能
複数のst_echarts()を呼び出すことで、複数のグラフを同一ページに表示できます。
col1, col2 = st.columns(2)
with col1:
st.subheader("棒グラフ")
st_echarts(options=bar_options)
with col2:
st.subheader("折れ線グラフ")
st_echarts(options=line_options)補足：構文エラーをデバッグするには？
- オプションを生成するコードを
st.write()で出力して確認：
st.write(options)- JavaScriptでの構造が正しいかどうか、ECharts公式のオンラインエディタでも試せます。
9. まとめ
streamlit-echartsを使えば、Streamlitで高機能・インタラクティブなグラフを簡単に描画できます。
データ分析・ダッシュボード構築・社内ツール開発にも応用可能です。
10. 参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。