ホームページ >ウェブフロントエンド >jsチュートリアル >美しい ECharts チャートを作成する方法
美しい ECharts チャートを作成する方法
- 王林オリジナル
- 2023-12-17 10:43:351119ブラウズ
美しい ECharts グラフの作成方法、具体的なコード例が必要です
ECharts は、豊富なグラフや視覚化を作成するために使用できる JavaScript ベースのオープンソース視覚化ライブラリです。 。さまざまな分野のデータ視覚化ニーズに適した、豊富なチャートの種類と対話型機能を提供します。この記事では、ECharts を使用して美しいグラフを作成する方法と、具体的なコード例を紹介します。
まず、ECharts ライブラリ ファイルを導入する必要があります。 ECharts 公式 Web サイト (https://echarts.apache.org/zh/index.html) からライブラリ ファイルの最新バージョンをダウンロードし、HTML ページに導入できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漂亮的ECharts图表</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="myChart" style="width: 600px; height: 400px;"></div>
<script>
// 在这里编写图表代码
</script>
</body>
</html>次に、<script></script> タグに特定のチャート コードを記述します。以下は、ヒストグラムの作成方法を示す簡単な例です。
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '柱状图示例'
},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10]
}]
};
// 使用配置项显示图表
myChart.setOption(option);上記のコードでは、まず echarts.init メソッドを通じてチャート インスタンスを取得し、次に setOption## を通じてチャートの構成項目とデータを設定します。 ＃ 方法。設定項目では、グラフのタイトル、X 軸と Y 軸のデータ、系列の種類とデータを定義できます。上記のヒストグラムを例として、title 設定項目を通じてグラフのタイトルを「棒グラフの例」に設定し、xAxis# を通じて x 軸のデータを [' に設定します。 ## 設定項目 A'、'B'、'C'、'D'、'E']、シリーズ タイプは series 設定項目によってヒストグラムに設定され、ヒストグラム データは次のように設定されます。 [5、20、36、10、10]。 ECharts は、棒グラフに加えて、折れ線グラフ、散布図、円グラフ、レーダー チャートなどの複数のグラフ タイプもサポートしています。以下に、一般的なグラフ作成コードの例をいくつか示します。
折れ線グラフの例:
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: '折线图示例'
},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E'],
axisLabel: {
rotate: 45 // 旋转x轴标签
}
},
yAxis: {},
series: [{
name: '数据',
type: 'line',
data: [5, 20, 36, 10, 10]
}]
};
myChart.setOption(option);円グラフの例:
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: '饼图示例'
},
series: [{
name: '数据',
type: 'pie',
data: [
{value: 5, name: 'A'},
{value: 20, name: 'B'},
{value: 36, name: 'C'},
{value: 10, name: 'D'},
{value: 10, name: 'E'}
]
}]
};
myChart.setOption(option);レーダー チャートの例:
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: '雷达图示例'
},
radar: {
indicator: [
{name: 'A', max: 10},
{name: 'B', max: 10},
{name: 'C', max: 10},
{name: 'D', max: 10},
{name: 'E', max: 10}
]
},
series: [{
name: '数据',
type: 'radar',
data: [
{value: [5, 8, 9, 7, 6], name: '数据1'},
{value: [3, 6, 7, 5, 4], name: '数据2'}
]
}]
};
myChart.setOption(option);上記のサンプル コードを通じて、さまざまな状況に応じて次のことができます。さまざまなタイプのグラフを作成し、タイトル、軸スタイルの設定、凡例の追加などの構成項目を調整してグラフのスタイルを美しくする必要があります。
要約すると、美しい ECharts チャートを作成するには次の手順が必要です。
ECharts ライブラリ ファイルを導入します。- チャート インスタンスを作成します。通常は echarts.init
- メソッドを使用して、HTML 要素をコンテナとして渡します。
グラフの構成項目やデータを設定し、グラフのスタイルを定義してデータを表示します。 - setOption
- メソッドを使用して、構成項目をチャート インスタンスに適用し、チャートを表示します。
以上が美しい ECharts チャートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。