图表（ym-rn-echarts）

背景

在RN中react-native-svg-charts仅支持构建简单的基本图表功能。对于相对复杂的定制化需求无法进行支持，而且学习成本高，使用复杂难以维护。echarts在图表功能和可定制性方面提供了更多的功能和选项，对比eact-native-svg-charts不需要复杂的堆叠组件，只需要进行option配置即可。但ehcart不支持在eact-native环境中运行，该组件将 echarts 做了简单的封装，使其在react-native环境中引用更加方便。

目的

ym-rn-echarts是在echarts的基础上进行改造，支持react-native环境，在rn环境中能够正常使用的一个图表库。

使用

ym-rn-echarts以npm包的形式方便插件研发进行调用

1. 安装命令： npm i ym-rn-echarts

2. 使用示例：

import ECharts from 'ym-rn-echarts';
render(){
        const option1={
//相应的option配置
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
      ]
    }
   return (<ECharts 
         onData={(data) => {console.log(data,'获取选中的数据下标')} 
         option={option1} 
      /> )
}

3. 注意事项：

调试前需要注掉：node_modules/@react-native-community/cli/build/commands/server/middleware/getSecurityHeadersMiddleware.js文件下的res.setHeader('X-Content-Type-Options', 'nosniff');来让浏览器自己解释文件类型。

4. 更多使用参考:

echarts配置文档

图表展示示例