React 컴포넌트에서 Echarts를 사용하기 위한 올바른 자세에 대한 자세한 설명

이 글에서는 주로 React 컴포넌트에서 Echarts를 사용하기 위한 샘플 코드를 소개하고 있습니다. 편집자께서 꽤 괜찮다고 생각하셔서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

요구 사항을 완료할 때 히스토그램을 사용해야 하는 시나리오가 발생합니다. 시각화에 관한 한 첫 번째 반응은 물론 Echarts입니다. 일반적으로 Echarts 구성 요소를 js로 로드하는 것은 매우 편리하지만 React에서는 많은 노력이 필요합니다. 모든 종류의 추측이 이루어졌습니다.

edmo에서는 우리가 구축한 반응 프로젝트에서 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 (  
      <p className="mt15 xui-financialAnalyse-page">   
        <p className="xui-general">
          <Chart data={info} data-info={info} />
        </p>
      </p>
    )
  }

여기서 Echarts 컴포넌트가 호출되고 2개의 속성이 전달됩니다. (데이터의 시작 부분은 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 (
       <p id="main" style={{width: 500, height:500}}></p>
    )
  }
});

위는 주로 사용하는 데모 Echarts 컴포넌트의 전체 코드입니다. 다양한 상태(3가지 상태) 처리 기능(총 5가지 유형)에 따라 반응하여 조정합니다.

1. componentWillMount: 실제 DOM을 삽입하기 전에 작업을 시작하고 백엔드에서 데이터를 요청합니다.

2. onChangeStore: 데이터가 변경되면 데이터를 업데이트하고 Store의 데이터 변경을 모니터링하기 위한 리스너를 getInitialState에 추가합니다.

3. componentDidUpdate: 데이터가 다시 렌더링된 후 showChart() 메서드를 트리거하여 캔버스를 그립니다.

4. showChart: Echarts 구성 정보는 Echarts 문서를 참조하세요.

5. 구성 요소 수명 주기가 종료되면 다음 코드를 추가하세요.

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

경고: setState(...): 마운트되거나 마운트된 구성요소만 업데이트할 수 있습니다. 이는 일반적으로 마운트되지 않은 구성요소에서 setState()를 호출했음을 의미합니다. 정의되지 않은 구성요소에 대한 코드를 확인하세요.

마지막으로 첨부된 내용은 다음과 같습니다. 렌더링:

　관련 추천 :

Echarts 사용법에 대한 자세한 소개

ECharts-HTML5 Canvas 기반 JavaScript 차트 라이브러리의 자세한 그래픽 및 텍스트 설명

ECharts3은 동적 데이터 + 시간 축의 작동을 구현합니다.

위 내용은 React 컴포넌트에서 Echarts를 사용하기 위한 올바른 자세에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!