ECharts | 高機能でインタラクティブなグラフ描画ライブラリ | 複数の実例で理解するJavaScriptライブラリ解説

スポンサーリンク

スポンサーリンク

EChartsについての解説

EChartsは、インタラクティブで多機能なグラフを作成できるJavaScriptのライブラリです。データ可視化のための多彩なチャート形式を提供しており、Webアプリケーションにおけるグラフ表示を簡単に実装できます。

EChartsの実装方法

EChartsを利用するためには、以下のJavaScriptファイルを<head>内に記述します。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

EChartsの特徴

特徴 説明
豊富なチャート種類 棒グラフ、折れ線グラフ、円グラフ、散布図など、多彩なチャートをサポート。
インタラクティブ性 マウスオーバーやクリックなどのインタラクションに対応し、動的なデータ表示が可能。
カスタマイズ性 オプションを使用して、レイアウトや色、アニメーションなどを柔軟に設定可能。
レスポンシブ対応 自動的に画面サイズに応じたグラフのスケーリングが可能。

プロパティとその値の一覧表

プロパティ名 説明 値の例
title グラフのタイトルを指定。 “基本的な棒グラフ”
xAxis X軸のデータを指定。 [‘月’, ‘火’, ‘水’, ‘木’, ‘金’]
yAxis Y軸の設定を指定。 {}
series グラフのシリーズデータを指定。 { name: ‘売上’, type: ‘bar’, data: [10, 20, 30] }

棒グラフを表示する例

実行例

HTMLとJavaScriptコード

<div id="bar-chart" style="width: 100%; height: 400px;"></div>

<script>
var chartDom1 = document.getElementById('bar-chart');
var myChart1 = echarts.init(chartDom1);
var option1 = {
    title: {
        text: '基本的な棒グラフ'
    },
    tooltip: {},
    xAxis: {
        data: ['リンゴ', 'バナナ', 'オレンジ', 'ぶどう', 'パイナップル', 'マンゴー']
    },
    yAxis: {},
    series: [{
        name: '数量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
myChart1.setOption(option1);
</script>

解説

この例では、EChartsを使って基本的な棒グラフを表示しています。X軸にはフルーツの名前、Y軸には数量を設定しています。

折れ線グラフを表示する例

実行例

HTMLとJavaScriptコード

<div id="line-chart" style="width: 100%; height: 400px;"></div>

<script>
var chartDom2 = document.getElementById('line-chart');
var myChart2 = echarts.init(chartDom2);
var option2 = {
    title: {
        text: '基本的な折れ線グラフ'
    },
    tooltip: {},
    xAxis: {
        data: ['月', '火', '水', '木', '金', '土', '日']
    },
    yAxis: {},
    series: [{
        name: '売上',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210]
    }]
};
myChart2.setOption(option2);
</script>

解説

この例では、曜日ごとの売上データを折れ線グラフとして表示しています。動的なデータ表示が簡単に実装できます。

EChartsの公式サイト

https://echarts.apache.org/

スポンサーリンク