Ahora vamos a continuar con EChartJS y vamos a crear una grafica de barras, esta grafia sirve para visualizacion de datos de nuestros sistemas.

En el articulo anterior ya hablamos sobre como crear una grafica de area con echartsjs, ahora vamos a crear una grafica de barras.

Codigo

Lo primero que vamos a hacer es rear un documento HTML y en el head de el documento vamos a agregar la referencia la libreria echartsjs.

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

Y en el body o cuerpo del documento vamos a agregar un div que usaremos como contenedor para la grafica.

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

EL siguiete codigo vamos a crear y activar la grafica, es codigo javascript debe ir entre las etiquetas <script></script>

var chartDom = document.getElementById('grafica');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [3530, 1120, 1501, 2934, 3500, 1150, 3225],
      type: 'bar',
      areaStyle: {}
    }
  ]
};

option && myChart.setOption(option);

Como se puede observar el codigo es muy parecido al de el ejemplo del articulo anterior.

Al ejecutarlo vamos a ver el resultado.

Y listo ahora a aplicar las graficas en nuestros proyectos!

Referencias

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

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