native-echarts 问题汇总

最新推荐文章于 2022-03-21 14:51:32 发布
最新推荐文章于 2022-03-21 14:51:32 发布
阅读量857 收藏 2
点赞数
文章标签： 移动开发 javascript json ViewUI
原文链接：https://segmentfault.com/a/1190000015758777
版权

一.当width 和 height 设置的不对的时候，会出现边框线如图所示：

解决办法：Echarts/index.js文件中

<WebView
                ref="chart"
                scrollEnabled = {false}
                injectedJavaScript = {renderChart(this.props)}
                style={{
                    height: this.props.height || 400,
                    backgroundColor: this.props.backgroundColor || 'transparent', //  ***********add by yourself*******************
                }}
                automaticallyAdjustContentInsets={true}
                source={require('./tpl.html')}
            />

二 折线区域图设置为渐变色，去掉节点，变成平滑

series: [{
        name: 'Clouds',
        type: 'line',
        // 变成平滑线
        smooth:true, 
        //这句就是去掉点的
         symbol:'none', 
        data: [5, 7, 13, 20, 30],
        // 设置为填充样式，把这句去掉的话，即为普通的折线图
areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0, color: 'rgba(6,81,222, 0.5)' // 100% 处的颜色
                                    },
                                    {
                                        offset: 0.5, color: 'rgba(6,81,222, 0.2)' // 50% 处的颜色
                                    },
                                    {
                                        offset: 1, color: 'rgba(253,253,253,0.17)' // 0% 处的颜色
                                    },

                                ],
                            }
                        }
                    },
        // 设置为渐变色， 此处设置的是针对网页的
        itemStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'red'},
                    {offset: 0.5, color: 'pink'},
                    {offset: 1, color: '#ddd'}
                ]
            )
        }
    }
}]

三 环图某一个项,设置为渐变色

data:[
                        {value:335, name:'正面消息', selected: true, itemStyle: normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: 'rgba(250,79,125,1)' // 100% 处的颜色
                        },
                        {
                            offset: 1, color: 'rgba(244,39,71,1)' // 0% 处的颜色
                        },

                    ]
                },
            }},
                        {value:180, name:'负面消息', itemStyle: {normal: 'green'}},
                    ]

四 android 打包后，所有的图表显示不出来

1./node_modules/native-echarts/src/components/Echarts/ 目录下的tpl.html 拷贝一份
2./android／app/src/main 创建 assets文件夹
3.把第一步拷贝的文件放到第二步创建的assets文件夹下
4.进入Echarts文件(/node_modules/native-echarts/src/components/Echarts/index) 把WebView的source改为

            
source={{uri: 'file:///android_asset/tpl.html'}}

五 修改图例颜色

react-native-echarts 修改图例颜色首先要修改itemStyle的颜色

六 解决频繁刷新

进入Echarts文件(/node_modules/native-echarts/src/components/Echarts/index)

shouldComponentUpdate(nextProps, nextState) {
        const thisProps = this.props || {}
        nextProps = nextProps || {}
        if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
            return true
        }
        for (const key in nextProps) {
            if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
// console.log('props', key, thisProps[key], nextProps[key])
                return true
            }
        }
        return false
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.option !== this.props.option) {

// 解决数据改变时页面闪烁的问题
            this.refs.chart.injectJavaScript(renderChart(nextProps,false))
        }
    }

修改WebView的属性injectedJavaScript

injectedJavaScript = {renderChart(this.props,true)}

进入renderChart文件(/node_modules/native-echarts/src/components/Echarts/renderChart)

export default function renderChart(props, isFirst) {
    const height = props.height || 400;
    if (isFirst) {
        return `
        document.getElementById('main').style.height = "${height}px";
    myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(${toString(props.option)});
    
  `
    } else {
        return `
    document.getElementById('main').style.height = "${height}px";
    myChart.setOption(${toString(props.option)});
    
  `
    }

七 折线图节点添加点击事件

进入renderChart文件(/node_modules/native-echarts/src/components/Echarts/renderChart)
添加

myChart.on('click' , function (params) {
        window.postMessage(params.dataIndex)
    });

添加后

if (isFirst) {
        return `
        document.getElementById('main').style.height = "${height}px";
    myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(${toString(props.option)});
    myChart.on('click' , function (params) {
        window.postMessage(params.dataIndex)
    });
  `
    } else {
        return `
    document.getElementById('main').style.height = "${height}px";
    myChart.setOption(${toString(props.option)});
    myChart.on('click' , function (params) {
        window.postMessage(params.dataIndex)
    });
  `
    }

进入Echart文件(/node_modules/native-echarts/src/components/Echarts/index)
WebView添加属性

 onMessage={this.onMessage}

添加事件

// 添加点击事件
    onMessage = (event) => {
        if (this.props.onNodePress) {
            console.log(event.nativeEvent)
            this.props.onNodePress(event.nativeEvent.data)
        }
    }

最终修改后
进入Echarts文件(/node_modules/native-echarts/src/components/Echarts/index)

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

    export default class App extends Component {
    // 预防过渡渲染
    
        shouldComponentUpdate(nextProps, nextState) {
            const thisProps = this.props || {}
            nextProps = nextProps || {}
            if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
                return true
            }
            for (const key in nextProps) {
                if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
    // console.log('props', key, thisProps[key], nextProps[key])
                    return true
                }
            }
            return false
        }
    
        componentWillReceiveProps(nextProps) {
            if(nextProps.option !== this.props.option) {
    
    // 解决数据改变时页面闪烁的问题
                this.refs.chart.injectJavaScript(renderChart(nextProps,false))
            }
        }
    
        // 添加点击事件
        onMessage = (event) => {
            if (this.props.onNodePress) {
                console.log(event.nativeEvent)
                this.props.onNodePress(event.nativeEvent.data)
            }
        }
    
        render() {
            if (Platform.OS == 'android'){
                return (
                    <View style={{flex: 1, height: this.props.height || 400,}}>
                        <WebView
                            ref="chart"
                            scrollEnabled = {false}
                            injectedJavaScript = {renderChart(this.props,true)}
                            onMessage={this.onMessage}
                            style={{
                                height: this.props.height || 400,
                                backgroundColor: this.props.backgroundColor || 'transparent'
                            }}
                            //source={require('./tpl.html')}
                            // 解决安卓打包不显示问题
                            source={{uri: 'file:///android_asset/tpl.html'}}
                        />
                    </View>
                );
            }else{
                return (
                    <View style={{flex: 1, height: this.props.height || 400,}}>
                        <WebView
                            ref="chart"
                            scrollEnabled = {false}
                            scalesPageToFit={false}
                            injectedJavaScript = {renderChart(this.props,true)}
                            onMessage={this.onMessage}
                            style={{
                                height: this.props.height || 400,
                                backgroundColor: 'rgba(0,0,0,0)',
                            }}
                            source={require('./tpl.html')}
                        />
                    </View>
                );
            }
    
        }
    }

进入renderChart文件(/node_modules/native-echarts/src/components/Echarts/renderChart)

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

var myChart = null;
export default function renderChart(props, isFirst) {
    const height = props.height || 400;
    if (isFirst) {
        return `
        document.getElementById('main').style.height = "${height}px";
    myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(${toString(props.option)});
    myChart.on('click' , function (params) {
        window.postMessage(params.dataIndex)
    });
  `
    } else {
        return `
    document.getElementById('main').style.height = "${height}px";
    myChart.setOption(${toString(props.option)});
    myChart.on('click' , function (params) {
        window.postMessage(params.dataIndex)
    });
  `
    }
}

使用

onChartNodePress(data) {
        console.log(data)
        this.setState({
            selectedNodeIndex: data,
        })
    }

<Echarts option={option} width={width} height={177}
                             onNodePress={(data) => this.onChartNodePress(data)}
                    />

android 双击图表会缩小
./node_modules/native-echarts/src/components/Echarts/index.js
Line 24

scalesPageToFit={false} 

替换为
scalesPageToFit={Platform.OS === 'android'}

八 react-native-echarts 解决数据刷新闪烁，不能动态连续绘制问题

动态绘制K线图，安卓，iOS正常显示

图片描述

替换node_modules/native-echarts/src/components/Echarts/中的index.js和renderChart.js

index.js替换代码

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

export default class App extends Component {
// 预防过渡渲染

shouldComponentUpdate(nextProps, nextState) {
const thisProps = this.props || {}
nextProps = nextProps || {}
if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
return true
}
for (const key in nextProps) {
if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
// console.log('props', key, thisProps[key], nextProps[key])
return true
}
}
return false
}

componentWillReceiveProps(nextProps) {
if(nextProps.option !== this.props.option) {
  
// 解决数据改变时页面闪烁的问题
this.refs.chart.injectJavaScript(renderChart(nextProps,false))
}
}

  render() {
    if (Platform.OS == 'android'){
      return (
      <View style={{flex: 1, height: this.props.height || 400,}}>
        <WebView
          ref="chart"
          scrollEnabled = {false}
          injectedJavaScript = {renderChart(this.props,true)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          //source={require('./tpl.html')}
          source={{uri: 'file:///android_asset/tpl.html'}}
        />
      </View>
    );
    }else{
      return (
      <View style={{flex: 1, height: this.props.height || 400,}}>
        <WebView
          ref="chart"
          scrollEnabled = {false}
          scalesPageToFit={false}
          injectedJavaScript = {renderChart(this.props,true)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          source={require('./tpl.html')}
        />
      </View>
    );
    }
    
  }
}
renderChart.js替换代码
import echarts from './echarts.min';
import toString from '../../util/toString';
var myChart = null;
export default function renderChart(props,isFirst) {
  const height = props.height || 400;
    if (isFirst){
      return `
    document.getElementById('main').style.height = "${height}px";
    myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(${toString(props.option)});
  `
    }else{
      return `
    document.getElementById('main').style.height = "${height}px";
    
    myChart.setOption(${toString(props.option)});
  `
    }
}

九 安卓打包echart不显示修复

1.将上述代码替换，注意备注部分

//解决安卓打包不显示问题
source={{uri: 'file:///android_asset/tpl.html'}}
2.将node_modules/native-echarts/src/components/Echarts/tpl.html拷贝一份到/android/app/src/main/assets/目录下

3.运行js打包命令
4.删除/android/app/src/main/res/drawable-mdpi/node_modules_nativeecharts_src_components_echarts_tpl.html
5.安卓打包APK

weixin_34007886
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react-native native-echarts
hopefullman的博客
01-18 630
项目里面用到了  native-echarts画图，至于加载空白部分暂时先不讲，主要贡献画折线图代码： react-native render里面写入  const optiondangyue = {       title: {         text: '当月四合一趋势图',         textStyle:{           color:'#000',           al...
在reactnative中使用echarts
08-10
要在 react-native 上使用 echarts 的图表库，目前方法主要是使用 react-native 的 webview 利用网页的形式加载 echarts 的图形。 本项目尽量使用少的代码实现本功能。
RN中native-echarts组件加入节点点击事件并传值
solor_s的博客
08-03 3340
项目需要用react native进行开发，使用到native echarts进行画折线图，并且给折线图的节点给予点击事件，将当前点击的节点的数据传输出来显示在页面上，找了很久，没有找到解决方案，于是只能自己尝试，现在尝试出了一个方法，拿出来分享下。如果有其他好的方法麻烦分享下，谢谢~有说的不对的地方，也请指正~
native-echarts的使用
zcylyzhi4的博客
09-02 1895
文章目录前言一、安装native-echarts二、使用步骤1. tpl.html的配置2. 修改source源，以便打包后chart图能正常显示3. 调用并显示chart图4. 效果图 前言 近期接到客户一需求，要在chart图上展示markLine标线，由于RN项目使用的chart图展示插件为：react-native-charts-wrapper，该插件没法实现此功能，只好另寻方案，试过使用webView实现此功能，但实际运行却经常白屏，故废弃，综合对比，选用了native-echarts来实现此功
使用native-echarts图表绘制组件-记录踩坑
贺知叶的博客
04-13 704
项目场景： 获取后台的数组数据结构，并根据项目需求绘制图形态势页面，将使用到第三方组件 ‘Native-Echarts’ 一、版本： “react”: “17.0.1”, “react-native”: “0.64.0”, “native-echarts”: “^0.5.0”, “react-native-webview”: “^11.3.2” 问题描述： 1、报错Invariant Violation:WebView has been removed from React Native. It ca
react-native-echarts-pro:一个基于native-echarts的更好的图表工具
05-03
react-native-echarts-pro English更好的基于native-echarts的图表工具。概括Core：1. Solve the problem of android tpl.html file reference;2. echarts version upgraded to 5.0;3. Support all kinds of ...
react-native-echarts-wrapper:React强大的React-Native ECharts包装器:bar_chart:
05-11
react-native-echarts-wrapper v2.0.0 用于 / Apache ECharts（正在孵化）包装器构建。 •• 适用于流行的echarts图表框架的React Native包装器。 使用此库，您可以在移动设备上创建性能出色的复杂交互式图表。 ...
react-native-echarts：React本征的图表。 天真React图
02-20
$ npm install native-echarts-保存 用法 使用情况与Echarts完全一致 组成道具： option （对象）：echarts的选项： 。 width （数字）：图表的宽度。 默认值为外部容器宽度。 高度（数字）：图表的高度。 默认值...
react-native-qrcode-svg：基于react-native-svg和node-qrcode的React Native QR码生成器
02-05
讨论： ： 产品特点轻松渲染QR码图像（可选）嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
react native中使用echarts
weixin_33911824的博客
03-14 944
开发平台：mac pro node版本：v8.11.2 npm版本：6.4.1 react-native版本：0.57.8 native-echarts版本：^0.5.0 目标平台：android端收银机，android7.0+ 最近在使用react native进行app的开发工作，rn开发的内容会与原生app混合，在一些使用场景下遇到了一些问题 使用场景：每日收益与每...
react native使用echarts图表
XKFC1的博客
03-21 4607
react native使用echarts图表
react-native集成超级强大的图表工具native-echarts
热门推荐
大灰狼的小绵羊哥哥的博客
03-31 1万+
闲话不多说，先到上动态图让大家看看。使用起来超级简单，完美适配ios和android chart.gif 简单介绍一下： 1.苹果 橘子 这个可以根据legend这个属性来设置，可一个可多个。具体参考代码 2.可以是单独的一种图形，也可以是多种切换 3.图形的颜色可以根据color属性来改，具体请参考代码 下面介绍下使用方法： 1。 npm insta
native-echarts实现动态资源图形化实时监控及代码示例
战丶后风！！的博客
01-30 1574
native-echarts实现动态资源实时监控
React Native 使用native-echarts图表组件
大漠-孤烟
06-25 1002
1、安装yarn add native-echarts 2、导入包importEcharts from'native-echarts'; 3、使用示例 const option = { tooltip: { trigger: 'axis'}, toolbox: { show: false, feature...
native-echarts 实现效果&代码 记录
qq_34619754的博客
10-31 1300
install $ npm install native-echarts --save 代码块： /** * 创建： jiaojiao on 2018/10/30. * 功能：LineView */ 'use strict'; import React, {PureComponent} from 'react'; import { View, Text, ...
native-echarts:柱状图渐变,圆角矩形
qq_43033251的博客
09-09 631
1、需求： 柱状图背景色需要做成渐变 柱状图顶角为圆角矩形 设计图： 官网直接有示例，官网给出的代码： rn中引入的是native-echarts,直接按照官网的例子写，new echarts.graphic.LinearGradient{}报错， 打印出来new echarts.graphic.LinearGradient: 2、解决： 直接定义，不用new series: [ { name: '用电量',
react native中使用native-echarts
weixin_30530523的博客
07-24 151
第一步，下载依赖 npm install native-echarts --save 第二步，引入 import Echarts from 'native-echarts'; 第三步，使用 export default class app extends Component { render() { const option = { ...
native-echarts填坑记录
爬不上树的小松鼠
09-20 675
android在release模式下图表无法展示
React Native 集成native-echarts(图表插件)及代码示例
战丶后风！！的博客
01-15 6359
React-Native 集成native-echarts(图表插件)
在react native中使用 react-native-echarts-pro组件的时候，图表会溢出容器，该如何将react-native-echarts-pro组件的大小设置成自适应容器的
最新发布
05-27
如果 react-native-echarts-pro 组件在 React Native 中的图表溢出容器，可以通过以下两种方法进行解决： 1.设置容器的大小 可以在容器组件中设置宽度和高度，然后将宽度和高度作为 props 传递给 react-native-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值