Apache ECharts (インキュベート) は、Baidu がオープンソース化した JavaScript ベースのビジュアル チャート ライブラリです。折れ線グラフ、ヒストグラム、散布図、円グラフ、レーダー チャート、ヒート マップなどの豊富な種類のグラフを提供し、動的データ、データ範囲の選択、データのズームなどの対話型機能をサポートします。同時に、Apache ECharts はさまざまなテーマ、アニメーション効果、画像のエクスポート、その他の機能も提供するため、ユーザーはさまざまなシナリオで独自のチャートをカスタマイズできます。Apache ECharts は、JSON、CSV、XML などのさまざまなデータ ソースをサポートし、ユーザーが二次開発やカスタマイズを実行するのに便利な API インターフェイスやイベント監視などの高度な機能も提供します。Apache ECharts は、データ視覚化、BI レポート、大画面ディスプレイなどの分野で広く使用されており、強力なデータ視覚化ツールとなっています。
目次
1. 公式サイトアドレス
公式Webサイトアドレス： https: //echarts.apache.org/zh/index.html
オンラインドキュメント:クイックスタート - ハンドブック - Apache ECharts
2. 導入事例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts快速入门教程</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;margin-top: 10%;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
data: [
'Direct',
'Marketing',
'Search Engine',
'Email',
'Union Ads',
'Video Ads',
'Baidu',
'Google',
'Bing',
'Others'
]
},
series: [{
name: 'Access From',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 14
},
labelLine: {
show: false
},
data: [{
value: 1548,
name: 'Search Engine'
},
{
value: 775,
name: 'Direct'
},
{
value: 679,
name: 'Marketing',
selected: true
}
]
},
{
name: 'Access From',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [{
value: 1048,
name: 'Baidu'
},
{
value: 335,
name: 'Direct'
},
{
value: 310,
name: 'Email'
},
{
value: 251,
name: 'Google'
},
{
value: 234,
name: 'Union Ads'
},
{
value: 147,
name: 'Bing'
},
{
value: 135,
name: 'Video Ads'
},
{
value: 102,
name: 'Others'
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>3. エフェクトのプレビュー
4. 非同期データのロードと動的更新
この例のデータは
setOption初期化後に直接入力されますが、多くの場合、データは入力される前に非同期でロードする必要がある場合があります。ECharts非同期データ更新の実装は非常に簡単で、チャートが初期化された後は、jQuery などのツールを通じてデータを非同期に取得し、いつでもsetOptionデータと設定項目を入力するだけです。
例：
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function(data) {
// data 的结构:
// {
// categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
// values: [5, 20, 36, 10, 10, 20]
// }
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {},
xAxis: {
data: data.categories
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: data.values
}
]
});
});または：
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: []
}
]
});
// 异步加载数据
$.get('data.json').done(function(data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [
{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}
]
});
});