React 구성 요소 에서 Echarts 의 예제 코드 를 사용 합 니 다.

하나의 요 구 를 완성 할 때 한 장면 을 만 나 려 면 막대 그래프 를 사용 해 야 한다.시각 화 와 관련 된 첫 번 째 반응 은 당연히 Echarts 입 니 다.평소에 js 로 Echarts 구성 요 소 를 불 러 오 는 것 은 편리 하지만 React 에 서 는 신경 을 써 야 합 니 다.각종 연대 추측 이 실현 되 었 다.에 드 모리
여기 서 우 리 는 자신 이 구축 한 react 프로젝트 에서 ECharts 를 사용 해 야 한다.우 리 는 ECharts 홈 페이지 에서웹 팩 에서 ECharts 사용 하기방식 이 있 는 것 을 볼 수 있다.우리 가 필요 로 하 는 것 은 바로 이런 방법 이다.
우 리 는 ECharts 를 사용 하기 전에 먼저 ECharts 를 설치 해 야 합 니 다.기 존의 개발 모델 에서 우 리 는 홈 페이지 에 있 는 ECharts 의 핵심 js 파일 을 html 또는 jsp 등 파일 에 가 져 오 는 것 을 많이 사용 합 니 다.그러나 react 프로젝트 에서 우 리 는 node.js 의 npm 명령 을 직접 사용 하여 설치 할 수 있 습 니 다.

npm install echarts --save

Echarts 의 예 는 Echarts 문서 에 소 개 된 가장 간단 한 응용 이다.

render:function() {
    
  var info = 1;

    return (  
      <div className="mt15 xui-financialAnalyse-page">   
        <div className="xui-general">
          <Chart data={info} data-info={info} />
        </div>
      </div>
    )
  }

이것 은 Echarts 구성 요 소 를 호출 하 는 곳 입 니 다.안에 두 개의 속성 을 전 달 했 습 니 다(data-시작은 H5 정의 규범 입 니 다)

var Chart = React.createClass({
  getInitialState: function() {
    this.token = Store.addListener(this.onChangeData);
    return {}
  },

  componentWillMount: function() {
    var info = this.props.data; 
    //HTML5         data-  ，        
    console.log(this.props['data-info']) 
    Action.getInfo(info);
  },


   componentDidUpdate: function() {
　　　　　this.showChart(this.state.data)
   },

   onChangeData: function() {
    var data = Store.getData();
    this.setState({
      data: data['info']['data'] //       
    });
  },

   showChart: function(dataSet){
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
        text: 'ECharts     '
      },
      color: ['#3398DB'],
      tooltip : {
        trigger: 'axis',
        axisPointer : {    
          type : 'shadow' 
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis : [
        {
          type : 'category',
          data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      series : [
        {
          name:'  ',
          type:'bar',
          barWidth: '60%',
          data: dataSet
        }
      ]
    };

    myChart.setOption(option);
   },

   render: function() {
    return (
       <div id="main" style={{width: 500, height:500}}></div>
    )
  }
});

위 는 완전한 demo Echarts 구성 요소 의 코드 로 주로 React 가 서로 다른 상태(3 가지 상태)에 따라 제공 하 는 처리 함수(모두 5 가지)를 이용 합 니 다.
1.componentWillMount:실제 DOM 을 삽입 하기 전에 Action 을 시작 하여 백 엔 드 에 데 이 터 를 요청 합 니 다.
2.onChange Store:데이터 가 변 경 될 때 데 이 터 를 업데이트 하고 getInitialState 에 감청 Store 에서 데이터 가 변 하 는 감청 기 를 추가 합 니 다.
3.componentDidUpdate:데이터 가 다시 렌 더 링 된 후에 showChart()방법 으로 canvas 를 그립 니 다.
4.showChart:Echarts 설정,구체 적 인 설정 정 보 는 Echarts 문 서 를 참고 할 수 있 습 니 다.
5.구성 요소 의 수명 주기 가 끝나 면 다음 과 같은 코드 를 추가 해 야 합 니 다.

  componentWillUnmount: function() {
    this.token.remove();
  },

그렇지 않 으 면 오류 가 발생 합 니 다.경고:setState(...):마 운 트 되 거나 마 운 트 되 는 구성 요소 만 업데이트 할 수 있 습 니 다.이것 은 보통 마 운 트 되 지 않 은 구성 요소 에서 setState()라 는 것 을 의미 합 니 다.이것 은 no-op 입 니 다.정의 되 지 않 은 구성 요소 의 코드 를 확인 하 십시오.
마지막 으로 효과 도 첨부:
　 　　　　
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.