Apache ECharts（incubating）是一款由百度开源的基于JavaScript的开源可视化图表库。它提供了丰富的图表类型，包括折线图、柱状图、散点图、饼图、雷达图、热力图等，并支持动态数据、数据区间选择、数据缩放等交互功能。同时，Apache ECharts还提供了多种主题、动画效果、导出图片等功能，方便用户在不同场景下定制自己的图表。Apache ECharts支持多种数据源，包括JSON、CSV、XML等，同时也提供了API接口、事件监听等高级功能，方便用户进行二次开发和定制。Apache ECharts已经被广泛应用于数据可视化、BI报表、大屏展示等领域，成为了一款强大的数据可视化工具。
目录
一、官网地址
二、入门案例
<!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>三、效果预览
四、异步数据的加载与动态更新
示例中的数据是在初始化后
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
}
]
});
});