react-grafico

import React from 'react';

import axios from 'axios';
import ReactEcharts from 'components/ReactECharts';
import CHARTCONFIG from 'constants/ChartConfig';

class GraficoMantencionesextends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      labels: null,
      data: null
    };

  }

  componentWillMount() {
    //Peticion al servidor para traer los datos
    //Aca puedes hacer el set del state labels y data

  }
  render() {

    const { data, labels } = this.state

    if(!data){
      return <div>loading...</div>
    }

    const bar1 = {};

    bar1.options = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Mantenciones'],
        textStyle: {
          color: CHARTCONFIG.color.text
        }
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: { show: true, title: 'save' }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: labels,
          axisLabel: {
            textStyle: {
              color: CHARTCONFIG.color.text
            }
          },
          splitLine: {
            lineStyle: {
              color: CHARTCONFIG.color.splitLine
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: CHARTCONFIG.color.text
            }
          },
          splitLine: {
            lineStyle: {
              color: CHARTCONFIG.color.splitLine
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: CHARTCONFIG.color.splitArea
            }
          }
        }
      ],
      series: [
        {
          name: 'Mantenciones',
          type: 'bar',
          data: data,
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: 'Average' }
            ]
          }
        }
      ]
    };


    return (
      <article className="article">
              <ReactEcharts option={bar1.options} showLoading={false} />
      </article>
    );
  }
}

export default GraficoMantencionesextends ;