ECharts es una potente librería de visualización de código abierto diseñada para crear gráficos interactivos y personalizables. ECharts ofrece amplias opciones de personalización, lo que te permite adaptar la apariencia y el comportamiento de los gráficos a requisitos específicos. Con ella, puedes agregar nuevas capas de personalización a tus widgets que simplifican el monitoreo y se ajustan mejor a las necesidades de tus usuarios.
Nota: Actualmente, solo el widget de Gráfico de Líneas es compatible con la configuración de ECharts. Estamos trabajando para agregar esta funcionalidad a más widgets.
Requisitos
Planes Enterprise de Ubidots.
Un widget que sea compatible con la configuración de ECharts.
1. Diferencia entre la configuración de ECharts y el Estilo personalizado
Con el objetivo de ser lo más personalizable y flexible posible, Ubidots ofrece múltiples opciones para modificar el funcionamiento y la apariencia de los widgets. Además de las opciones de configuración nativas de cada widget, existen dos herramientas que permiten personalizar los widgets en profundidad: la configuración de ECharts y el más tradicional Estilo personalizado.
La forma más sencilla de entender la diferencia entre estas dos opciones es pensar en los widgets como pinturas. Mientras que el Estilo personalizado te permite modificar el marco y el lienzo, la configuración de ECharts te permite personalizar la pintura en sí. Por ejemplo, ¿te gustaría que tu widget tenga esquinas más suaves o un fondo transparente? Usa Estilo personalizado. ¿Te gustaría, por otro lado, tener líneas más gruesas o números de referencia más pequeños en tu Gráfico de Líneas? Entonces usa la configuración de ECharts.
2. Cómo usar la configuración de ECharts
Para usar la configuración de ECharts, simplemente sigue estos pasos:
Crea o edita un widget que sea compatible con la funcionalidad de ECharts*.
Ve a la pestaña de apariencia.
Ubica la opción “Configuración de ECharts” y abre el editor.
Personaliza el widget modificando las opciones del JSON. Consulta la documentación de ECharts para entender mejor todas las opciones configurables disponibles.
*Actualmente, solo los siguientes widgets son compatibles con la configuración de ECharts:
Gráfico de Líneas
Indicador (Gauge)
Estamos trabajando para agregar esta funcionalidad a más widgets.
** En este momento, no se admite la adición de funciones directamente en el JSON, a pesar de que la documentación de ECharts indica que es posible para ciertos atributos. Planeamos admitir esta funcionalidad en el futuro.
3. Ejemplos de Gráfico de Líneas
Con el siguiente JSON puedes crear un Gráfico de Líneas como el de la imagen anterior. Es un ejemplo que muestra cómo obtener líneas más gruesas, fuentes más grandes, tooltips diferentes y líneas divisorias modificadas, entre otras cosas.
{
"yAxis": [
{
"type": "value",
"axisLine": {
"lineStyle": {
"color": "#000000"
}
},
"axisLabel": {
"color": "#000000",
"fontSize": 15
},
"splitLine": {
"lineStyle": {
"color": [
"#000000"
],
"opacity": 0.3
}
},
"min": "dataMin",
"max": "dataMax",
"name": "Eje Y por defecto",
"nameLocation": "center",
"nameGap": 70,
"nameTextStyle": {
"color": "#000000"
},
"position": "left",
"show": true,
"offset": 0,
"gridIndex": 0
}
],
"series": [
{
"z": 0,
"name": "##{{variable.name}} [##{{variable.unit}}] (##{{device.name}})",
"step": false,
"type": "line",
"stack": null,
"symbol": "emptyCircle",
"barWidth": 40,
"markLine": {
"data": [
{
"name": "Promedio",
"type": "average",
"lineStyle": {
"color": "#f39c12",
"width": 3
}
}
]
},
"animation": true,
"itemStyle": {
"color": "#33c9dc",
"opacity": 0.8,
"borderColor": "#33c9dc"
},
"lineStyle": {
"color": "#33c9dc",
"width": 4
},
"markPoint": {
"data": [
{
"name": "Máx",
"type": "max",
"symbol": "pin"
},
{
"name": "Mín",
"type": "min",
"symbol": "pin"
}
]
},
"showSymbol": true,
"symbolSize": 8,
"yAxisIndex": 0,
"barMaxWidth": 40,
"connectNulls": true
}
],
"xAxis": [
{
"type": "time",
"name": "",
"nameLocation": "center",
"nameGap": 28,
"nameTextStyle": {
"color": "#000000"
},
"axisLabel": {
"color": "#000000",
"fontSize": 15
},
"axisLine": {
"lineStyle": {
"color": "#000000"
}
},
"splitLine": {
"lineStyle": {
"color": [
"#000000"
],
"opacity": 0.3
}
},
"axisTick": null,
"z": 2,
"show": false,
"minInterval": ""
}
],
"dataZoom": [
{
"show": true,
"filterMode": "none",
"xAxisIndex": 0,
"realtime": true,
"textStyle": {
"color": "#5E5E5E",
"fontSize": 11
},
"dataBackground": {
"areaStyle": {
"color": "#33c9dc"
}
},
"right": 45,
"left": 45
}
],
"legend": {
"itemHeight": 14,
"itemWidth": 25,
"pageIconColor": "#5E5E5E",
"pageIconInactiveColor": "#5E5E5E",
"pageTextStyle": {
"color": "#5E5E5E"
},
"textStyle": {
"color": "#000000",
"fontSize": 15
},
"top": 0,
"type": "scroll",
"show": true,
"itemGap": 10,
"padding": 5
},
"grid": {
"bottom": 60,
"containLabel": true,
"left": 60,
"right": 60,
"top": 10
},
"tooltip": {
"confine": true,
"trigger": "axis",
"show": true,
"axisPointer": {
"type": "cross",
"label": {
"backgroundColor": "#6a7985"
}
},
"borderColor": "#000000",
"borderWidth": 1,
"backgroundColor": "rgba(0,165,187,0.8)"
}
}
3.1. Ejemplos detallados
4. Ejemplos de Gauge
Con el siguiente JSON puedes personalizar el estilo por defecto del widget Gauge:
{
"series": [
{
"type": "gauge",
"min": 0,
"max": 100,
"startAngle": 200,
"endAngle": -20,
"splitNumber": 10,
"radius": "95%",
"center": [
"50%",
"58%"
],
"axisLine": {
"lineStyle": {
"width": 12,
"color": [
[
1,
"#E9EDF2"
]
]
}
},
"progress": {
"show": false
},
"pointer": {
"show": true,
"width": 6,
"length": "55%",
"itemStyle": {
"color": "#5470C6"
}
},
"axisTick": {
"show": true,
"distance": -12,
"length": 6,
"splitNumber": 5,
"lineStyle": {
"color": "#8C8C8C",
"width": 1
}
},
"splitLine": {
"show": true,
"distance": -12,
"length": 12,
"lineStyle": {
"color": "#6B6B6B",
"width": 2
}
},
"axisLabel": {
"show": true,
"distance": 18,
"color": "#5A5A5A",
"fontSize": 10,
"formatter": "{value}"
},
"title": {
"show": true,
"offsetCenter": [
0,
"25%"
],
"color": "#6B6B6B",
"fontSize": 12
},
"detail": {
"show": true,
"offsetCenter": [
0,
"42%"
],
"valueAnimation": true,
"color": "#3C3C3C",
"fontSize": 28,
"fontWeight": "bold",
"formatter": "{value}"
}
}
]
}
4.1. Ejemplos detallados
