React Native 는 바 이 두 Echarts 를 사용 하여 도표 의 예제 코드 를 표시 합 니 다.

Echarts 는 바 이 두 가 내 놓 은 무료 오픈 소스 의 도표 구성 요소 로 기능 이 풍부 하고 각 업계 의 도 표를 포함한다.많은 학우 들 이 홈 페이지 에서 모두 사용 한 적 이 있다 고 믿는다.오늘 은 React Native 에서 Echarts 를 어떻게 사용 하여 각종 도 표를 표시 하 는 지 소개 하 겠 습 니 다.
우선 React Native 프로젝트 에 native-ecarts 구성 요 소 를 설치 해 야 합 니 다.이 구성 요 소 는 IOS 와 안 드 로 이 드 더 블 플랫폼 을 호 환 합 니 다.
설치 하 다.

npm install native-echarts --save

설치 완료 후 nodemodules 폴 더 아래 에 native-ecarts 라 는 폴 더 가 하나 더 나 옵 니 다.
디 렉 터 리 구 조 는 다음 그림 과 같다.
 
기초 사용
native-ecarts 의 사용 방법 은 기본적으로 웹 페이지 의 Echarts 사용 방법 과 일치 합 니 다.구성 요 소 는 주로 세 가지 속성 이 있 습 니 다:

option(object):도표 의 관련 설정 과 데이터.문서 참조:ECharts Documentation

width(number):도표 의 너비,기본 값 은 외부 용기 의 너비 입 니 다.

height(number):도표 의 높이,기본 값 은 400 입 니 다.

예제 코드:

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from 'react-native';
import Echarts from 'native-echarts';

export default class app extends Component {
 render() {
  const option = {
   title: {
     text: 'ECharts demo'
   },
   tooltip: {},
   legend: {
     data:['  ']
   },
   xAxis: {
     data: ["  ","   ","   ","  ","   ","  "]
   },
   yAxis: {},
   series: [{
     name: '  ',
     type: 'bar',
     data: [5, 20, 36, 10, 10, 20]
   }]
  };
  return (
   <Echarts option={option} height={300} />
  );
 }
}

AppRegistry.registerComponent('app', () => app);

위의 코드 를 통 해 우 리 는 React Native 에 도 표를 표시 할 수 있다.그러나 우 리 는 표 시 된 글꼴 이 비교적 작 다 는 것 을 발견 할 것 이다.이동 단 에 맞 는 글꼴 이 필요 합 니 다.native-ecarts 파일 에서 tpl.html 파일 을 찾 아야 합 니 다.head 에 다음 코드 를 추가 해 야 합 니 다.<meta name="viewport" content="width=device-width, initial-scale=1"> 이렇게 하면 글씨체 의 크기 가 정상적으로 나타난다.
진급 사용:
도 표를 사용 할 때 만약 에 우리 가 도표 의 클릭 사건 을 사용 해 야 한다 면,예 를 들 어 기둥 모양 그림 의 어떤 기둥 을 클릭 하여 이 기둥 의 정 보 를 얻 고 상세 한 페이지 로 넘 어가 면 어떻게 해 야 합 니까?구성 요소 자체 에 이 속성 이 없습니다.코드 를 수정 하고 메 시 지 를 전달 해 야 합 니 다.구체 적 인 코드 는 다음 과 같다.
우선 renderChart.js 파일 에 필요 한 데 이 터 를 주입 하고 전달 해 야 합 니 다(window.postmessage).

import echarts from './echarts.min';
import toString from '../../util/toString';

export default function renderChart(props) {
 const height = props.height || 400;
 const width = props.width || 568;
 return `
  document.getElementById('main').style.height = "${height}px";
  document.getElementById('main').style.width = "${width}px";
  var myChart = echarts.init(document.getElementById('main'));
  myChart.setOption(${toString(props.option)});
  myChart.on('click', function (params) {
   var message = {};
   message.event='click';
   message.seriesName = params.seriesName;
   message.name = params.name;
   window.postMessage(JSON.stringify(message));
 });
 `
}

그리고 index.js 에서 처리 하기(handle Message):

import React, { Component } from 'react';
import { WebView, View, StyleSheet, Platform } from 'react-native';
import renderChart from './renderChart';
import echarts from './echarts.min';

export default class App extends Component {
 componentWillReceiveProps(nextProps) {
  if(JSON.stringify(nextProps.option) !== JSON.stringify(this.props.option)) {
   this.refs.chart.reload();
  }
 }
 handleMessage = (evt) => {
  const message = JSON.parse(evt.nativeEvent.data)
   this.props.handleMessage(message);
 }
 render() {
  return (
   <View style={{flex: 1, height: this.props.height,width: this.props.width }}>
    <WebView
     ref="chart"
     scrollEnabled = {false}
     injectedJavaScript = {renderChart(this.props)}
     style={{
      height: this.props.height|| 400,
      width: this.props.width || 568,
     }}
     onMessage={this.handleMessage}
     source={require('./tpl.html')}
    />
   </View>
  );
 }
}

마지막 으로 그래프 를 사용 하 는 페이지 에서 코드 를 수정 하여 전 달 된 메 시 지 를 받 아들 입 니 다.<Echarts option={option} height={height} width={theme.screenWidth} handleMessage={this.handleMessage} />handle Message 방법 에서 전 달 된 데 이 터 를 자신의 논 리 를 써 서 처리 할 수 있 습 니 다.
포장:
이렇게 포장 하면 IOS 는 정상적으로 포장 하고 표시 할 수 있 습 니 다.하지만 안 드 로 이 드 에서 포장 할 때 오류 가 발생 할 수 있 습 니 다.
해결 방법:
index.js 의 코드:source={require('./tpl.html')}를 다음 으로 변경 합 니 다.source= {Platform.OS === 'ios' ? require('./tpl.html') : { uri: 'file:///android_asset/tpl.html' }}안 드 로 이 드 프로젝트 아래 app/src/main/assets 폴 더 에 tpl.html 파일 을 복사 합 니 다.
react-native bundle 명령 을 실행 한 후 자원 파일 res/drawable-mdpi 에서 생 성 된 tpl.html 파일 을 수 동 으로 삭제 하고 cd android&&./gradlew assemble Release 명령 을 실행 하면 성공 적 으로 포장 할 수 있 습 니 다.
Q1
데이터 양 이 비교적 많 을 때 x 축의 데 이 터 는 표시 되 지 않 습 니 다.이것 은 echarts 자체 의 기능 입 니 다.해결 방법 은 xAxis-axis Label-interval 을 0 으로 설정 하면 됩 니 다.
Q2
면적 접선 도 에서 면적 의 색깔 이'바 르 지 않다'는 것 은 바로 설 치 된 색깔 과 맞지 않 는 다 는 것 이다.이것 은 react-native-ecarts 구성 요소 의 패키지 문제 일 수 있 습 니 다.해결 방법 은 area Style-normal-shadow Color 를'\#ffff ff'로 설정 하 는 것 입 니 다.마찬가지 로 lineStyle 등 을 설정 할 수 있 습 니 다.
Q3
릴 리 스 백 을 칠 때 잘못 신 고 했 습 니 다.
\android\app\src\main\res\drawable-mdpiode_modules_nativeecharts_src_components_echarts_tpl.html
Error:Error: The file name must end with .xml or .png
원인:
release 포장 할 때 nodemodules_nativeecharts_src_components_echarts_tpl.html 가 drawable 에 걸 렸 습 니 다.이 건 안 됩 니 다.assets 에 넣 어야 합 니 다.
해결책 은
또한,release 버 전 은 uri 로 자원 을 불 러 올 수 있 습 니 다.android 는 tpl.html 파일 을 android/app/src/main/assets 파일 에 넣 고 uri:'을 사용 합 니 다.file:///android_asset/tpl.html'이라는 주 소 를 불 러 옵 니 다.ios 는 프로젝트 디 렉 터 리 에 폴 더 를 만 들 고 tpl 파일 을 안에 넣 고 uri:'파일 이름/tpl'로 불 러 옵 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.