Apache ECharts(인큐베이팅)는 Baidu에서 오픈 소스로 제공하는 오픈 소스 JavaScript 기반 시각적 차트 라이브러리입니다. 꺾은선형 차트, 히스토그램, 스캐터 차트, 파이 차트, 레이더 차트, 히트 맵 등 다양한 차트 유형을 제공하며 동적 데이터, 데이터 범위 선택, 데이터 확대/축소와 같은 대화형 기능을 지원합니다. 동시에 Apache ECharts는 다양한 테마, 애니메이션 효과, 그림 내보내기 및 기타 기능을 제공하여 사용자가 다양한 시나리오에서 자신의 차트를 사용자 지정할 수 있습니다. Apache ECharts는 JSON, CSV, XML 등 다양한 데이터 소스를 지원하고 API 인터페이스 및 이벤트 모니터링과 같은 고급 기능을 제공하여 사용자가 2차 개발 및 사용자 정의를 수행하는 데 편리합니다. Apache ECharts는 데이터 시각화, BI 보고서, 대형 화면 디스플레이 및 기타 분야에서 널리 사용되었으며 강력한 데이터 시각화 도구가 되었습니다.
목차
1. 공식 홈페이지 주소
공식 웹사이트 주소: 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
}
]
});
});