SHARE
TWEET

react-grafico

a guest Apr 25th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2.  
  3. import axios from 'axios';
  4. import ReactEcharts from 'components/ReactECharts';
  5. import CHARTCONFIG from 'constants/ChartConfig';
  6.  
  7. class GraficoMantencionesextends React.Component {
  8.   constructor(props) {
  9.     super(props);
  10.     this.state = {
  11.       labels: null,
  12.       data: null
  13.     };
  14.  
  15.   }
  16.  
  17.   componentWillMount() {
  18.     //Peticion al servidor para traer los datos
  19.     //Aca puedes hacer el set del state labels y data
  20.  
  21.   }
  22.   render() {
  23.  
  24.     const { data, labels } = this.state
  25.  
  26.     if(!data){
  27.       return <div>loading...</div>
  28.     }
  29.  
  30.     const bar1 = {};
  31.  
  32.     bar1.options = {
  33.       tooltip: {
  34.         trigger: 'axis'
  35.       },
  36.       legend: {
  37.         data: ['Mantenciones'],
  38.         textStyle: {
  39.           color: CHARTCONFIG.color.text
  40.         }
  41.       },
  42.       toolbox: {
  43.         show: true,
  44.         feature: {
  45.           saveAsImage: { show: true, title: 'save' }
  46.         }
  47.       },
  48.       calculable: true,
  49.       xAxis: [
  50.         {
  51.           type: 'category',
  52.           data: labels,
  53.           axisLabel: {
  54.             textStyle: {
  55.               color: CHARTCONFIG.color.text
  56.             }
  57.           },
  58.           splitLine: {
  59.             lineStyle: {
  60.               color: CHARTCONFIG.color.splitLine
  61.             }
  62.           }
  63.         }
  64.       ],
  65.       yAxis: [
  66.         {
  67.           type: 'value',
  68.           axisLabel: {
  69.             textStyle: {
  70.               color: CHARTCONFIG.color.text
  71.             }
  72.           },
  73.           splitLine: {
  74.             lineStyle: {
  75.               color: CHARTCONFIG.color.splitLine
  76.             }
  77.           },
  78.           splitArea: {
  79.             show: true,
  80.             areaStyle: {
  81.               color: CHARTCONFIG.color.splitArea
  82.             }
  83.           }
  84.         }
  85.       ],
  86.       series: [
  87.         {
  88.           name: 'Mantenciones',
  89.           type: 'bar',
  90.           data: data,
  91.           markPoint: {
  92.             data: [
  93.               { type: 'max', name: 'Max' },
  94.               { type: 'min', name: 'Min' }
  95.             ]
  96.           },
  97.           markLine: {
  98.             data: [
  99.               { type: 'average', name: 'Average' }
  100.             ]
  101.           }
  102.         }
  103.       ]
  104.     };
  105.          
  106.  
  107.     return (
  108.       <article className="article">
  109.               <ReactEcharts option={bar1.options} showLoading={false} />
  110.       </article>
  111.     );
  112.   }
  113. }
  114.  
  115. export default GraficoMantencionesextends ;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top