native-echarts的使用

---

前言

近期接到客户一需求，要在chart图上展示markLine标线，由于RN项目使用的chart图展示插件为：react-native-charts-wrapper，该插件没法实现此功能，只好另寻方案，试过使用webView实现此功能，但实际运行却经常白屏，故废弃，综合对比，选用了native-echarts来实现此功能

一、安装native-echarts

 npm install native-echarts

二、使用步骤

1. tpl.html的配置

在node_modules包中找到native-charts包，拷贝native-echarts/src/components/Echarts文件夹下面的tpl.html

在项目android/app/src/main/assets目录下，粘贴tpl.html

如果没有assets文件夹，则直接新建assets文件夹即可

建议：拷贝及粘贴tpl.html，建议在项目对应的磁盘文件夹中操作，不直接在编辑中操作；本人刚开始在编辑器中操作，结果assets目录的tpl.html总是无法保存或自动被修改

2. 修改source源，以便打包后chart图能正常显示

编辑 node_modules/native-echarts/src/components/Echarts/index.js文件，

在顶部添加如下代码

const iosPlatform = Platform.OS === 'ios' ? 'true' : 'false';

修改WebView标签的source属性如下：

source={iosPlatform === 'true' ? require('./tpl.html') : {uri: 'file:///android_asset/tpl.html'}}

3. 调用并显示chart图

引入naitve-charts

import Echarts from 'native-echarts';

调用

<Echarts option={this.state.option}  height={250} />

option代码参考：

initChartOption = () => {
       let option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b0}: {c0}/{a0}'
        },
       grid: {
          left: 10,   //图表距边框的距离
          right: 60,
          bottom: 40,
          top: 10,
          containLabel: true,
        },
       xAxis: {
           type: 'category',
           boundaryGap: false,
           axisLabel: {  
              rotate:-40,
              formatter: function (value) {
                return value.substr(0,10);
              }
           },
           data: ['星期一','星期二'，'星期三'，'星期四','星期五']
       },
       yAxis: {
           type: 'value'
       },
       color : ['#66A7E8'],
       series: [{
           name : '',
           data: [1,2,3,4,5],
           type: 'line',
           connectNulls : true,
           lineStyle : {
              normal : {
                color : '#66A7E8'
              }
           },
           areaStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#8CB2FA'
                        },
                        {
                            offset: 1,
                            color: '#fff',
                        },
                    ],
                    globaCoord: false,
                },
            },
          },
           markLine: {
               symbol:"none",
               silent: false,
               lineStyle: {
               type:"solid",
                 normal: {
                   type : 'solid',
                   color: '#ff0000'                   // 这儿设置安全基线颜色
                 }
               },
               data: [],
               label: {
                 normal: {
                    formatter: '{b}: {c}' 
                 }
               },
           },
   
       }]
   };
   return option;
    }

4. 效果图