Widgets: configuración de ECharts | Ubidots Centro de Ayuda

ECharts es una poderosa biblioteca 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 la monitorización y se adaptan mejor a las necesidades de tus usuarios.

Nota: Actualmente, solo el widget de Gráfico de Líneas admite la configuración de ECharts. Estamos trabajando en agregar esta función a más widgets.

Requisitos

Planes Enterprise de Ubidots.
Un widget que admita la configuración de ECharts.

1. Diferencia entre la configuración de ECharts y el Estilo personalizado

Buscando ser lo más personalizable y flexible posible, Ubidots ofrece múltiples opciones para modificar la forma en que los widgets funcionan y se ven. Además de las opciones de configuración nativas de cada widget, hay dos herramientas que te permiten personalizar completamente tus widgets: la configuración de ECharts y el más tradicional Estilo personalizado.

La forma más simple 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 tuviera esquinas más suaves o un fondo transparente? Usa Estilo personalizado. Por otro lado, ¿te gustaría 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, solo sigue estos pasos:

Crea o edita un widget que admita la función de ECharts*.
Ve a su 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 comprender mejor todas las opciones configurables disponibles.

*Actualmente, solo el widget de Gráfico de Líneas admite la configuración de ECharts. Estamos trabajando en agregar esta función a más widgets.

3. Ejemplo

Con el siguiente JSON puedes crear una Gráfico de Líneas como el de la imagen anterior. Es un ejemplo que muestra cómo puedes obtener líneas más gruesas, fuentes más grandes, diferentes tooltips y líneas de división 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": "Default Y-axis",
      "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": "Average",
            "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": "Max",
            "type": "max",
            "symbol": "pin"
          },
          {
            "name": "Min",
            "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)"
  }
}