Apache ECharts (incubación) es una biblioteca de gráficos visuales basada en JavaScript de código abierto de código abierto de Baidu. Proporciona una gran cantidad de tipos de gráficos, incluidos gráficos de líneas, histogramas, gráficos de dispersión, gráficos circulares, gráficos radiales, mapas de calor, etc., y admite funciones interactivas como datos dinámicos, selección de rango de datos y zoom de datos. Al mismo tiempo, Apache ECharts también proporciona una variedad de temas, efectos de animación, imágenes de exportación y otras funciones, para que los usuarios puedan personalizar sus propios gráficos en diferentes escenarios. Apache ECharts admite una variedad de fuentes de datos, incluidos JSON, CSV, XML, etc., y también proporciona funciones avanzadas como interfaz API y monitoreo de eventos, lo cual es conveniente para que los usuarios lleven a cabo un desarrollo secundario y una personalización. Apache ECharts se ha utilizado ampliamente en la visualización de datos, informes de BI, visualización en pantalla grande y otros campos, y se ha convertido en una poderosa herramienta de visualización de datos.
Tabla de contenido
1. Dirección del sitio web oficial
4. Carga de datos asíncrona y actualización dinámica
1. Dirección del sitio web oficial
Dirección del sitio web oficial: https://echarts.apache.org/zh/index.html
Documentación en línea: Inicio rápido - Manual - Apache ECharts
2. Caso introductorio
<!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. Vista previa del efecto
4. Carga de datos asíncrona y actualización dinámica
Los datos del ejemplo se
setOptioncompletan directamente después de la inicialización, pero en muchos casos, es posible que los datos deban cargarse de forma asincrónica antes de completarse. Es muy simple implementar la actualización de datos asíncrona en .Después de inicializar el gráfico, solo necesita obtener los datos de forma asíncrona a través de herramientas como jQuery y completar los datos y los elementos de configuraciónEChartsen cualquier momento .setOption
ejemplo:
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
}
]
});
});o:
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
}
]
});
});