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. 效果图

在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值