Apache ECharts (incubating) is an open source JavaScript-based visual chart library open sourced by Baidu. It provides a wealth of chart types, including line charts, histograms, scatter charts, pie charts, radar charts, heat maps, etc., and supports interactive functions such as dynamic data, data range selection, and data zooming. At the same time, Apache ECharts also provides a variety of themes, animation effects, export pictures and other functions, so that users can customize their own charts in different scenarios. Apache ECharts supports a variety of data sources, including JSON, CSV, XML, etc., and also provides advanced functions such as API interface and event monitoring, which is convenient for users to carry out secondary development and customization. Apache ECharts has been widely used in data visualization, BI reports, large-screen display and other fields, and has become a powerful data visualization tool.
Table of contents
4. Asynchronous data loading and dynamic update
1. Official website address
Official website address: https://echarts.apache.org/zh/index.html
Online Documentation: Quick Start - Handbook - Apache ECharts
2. Introductory case
<!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. Effect preview
4. Asynchronous data loading and dynamic update
The data in the example is
setOptionfilled directly after initialization, but in many cases, the data may need to be loaded asynchronously before being filled. It is very simple to implement asynchronous data update in . After the chart is initialized, you only need to get the data asynchronously through tools such as jQuery and fill in the data and configuration itemsEChartsat any time .setOption
example:
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
}
]
});
});or:
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
}
]
});
});