La libreria para graficas EChartsJS forma parte del proyecto apache, por lo cual es una libreria Open Source / Codigo abierto, gratis y cuenta con muchos tipos de graficas.

La libreria EchartsJS es una libreria de visualizacion de datos que cuenta con muchos ejemplos o tipos de graficas, entre los que se encuentran:

• Grafica de lineas
• Grafica de barras
• Grafica de area
• Grafica de lineas apiladas
• Grafica de lineas apiladas
• Grafica polar
• Grafica de barras
• Grafica de dispersion
• Grafica de radar
• Grafica de donas
• Y mucho mas

Como veran hay muchos ejemplos, alfinal del articulos les dejo la referencia a la pagina oficial.

Ahora vamos a ver un ejemplo sencillo, de como crear una grafica de lineas o area, aunque este ejemplo sirve para luego experimentar con otros tipos de graficas.

Codigo

Lo primero seria descargar la libreria echartsjs que en mi caso descargue la version 6 directamente de GitHub de Echarts.

De la carpeta que se va a descargar unicamente vamos a usar la carpeta dist y dentro el archivo echarts.min.js

Y vamosa incluir la libreria en el head de nuestro html.

        <script src="dist/echarts.min.js"></script>

Despues en el body de nuestro html debemos crear una etiqueta div para agregar la grafica.

        <div id="grafica" style="width: 100%;height:500px;"></div>

Ahora vamos con el codigo para crear la grafica y hacer uso del poder de la libreria EChartsJS.

Este codigo debe ir dentro de las etiquedas <script></script>

var chartDom = document.getElementById('grafica'); // se define el contexto de la grafica
var myChart = echarts.init(chartDom); // se inicializa la grafica
var option;
// xAxis es el eje X
// yAxis es el eje Y
// series es el grupo de datos. en el data debe haber la cantidad de datos que coincida con el eje X
option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [530, 120, 501, 934, 120, 130, 3225],
      type: 'line',
      areaStyle: {}
    }
  ]
};

option && myChart.setOption(option); // Asignamos la opcion y renderiamos

Y listo ahora solo falta guardar todo en un documento HTML con un nombre por ejemplo echartjs.html ejecutarlo en el navegador y listo.

El resultado.

Referencias

Ahora si las referencias.

Pagina principal de EchartsJS: https://echarts.apache.org/en/index.html

Github oficial de EchartsJS: https://github.com/apache/echarts