native-echarts 问题汇总

lpjustdoit 发布于2019-06-25 12:16 / 2961人阅读

摘要：一当和设置的不对的时候，会出现边框线如图所示解决办法文件中二折线区域图设置为渐变色，去掉节点，变成平滑变成平滑线这句就是去掉点的设置为填充样式，把这句去掉的话，即为普通的折线图处的颜色处的颜色处的颜色设置为渐变色，此处设置的是针对网页的三环

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

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

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

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: "#ffffd"}
                ]
            )
        }
    }
}]

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

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 (
                    
                        
                    
                );
            }else{
                return (
                    
                        
                    
                );
            }
    
        }
    }

进入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,
        })
    }

 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 (
      
        
      
    );
    }else{
      return (
      
        
      
    );
    }
    
  }
}
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

私有云 idc机房托管问题汇总号码隐私保护常见问题汇总代码汇总分类汇总

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/14315.html

native-echarts 问题汇总

摘要：一当和设置的不对的时候，会出现边框线如图所示解决办法文件中二折线区域图设置为渐变色，去掉节点，变成平滑变成平滑线这句就是去掉点的设置为填充样式，把这句去掉的话，即为普通的折线图处的颜色处的颜色处的颜色设置为渐变色，此处设置的是针对网页的三环一.当width 和 height 设置的不对的时候，会出现边框线如图所示：解决办法：Echarts/index.js文件中二折线区域图...

phodal 2019-06-25 16:54 评论0 收藏0
react native中使用echarts

摘要：内部使用的版本为版本，如果需要更高级的版本，只需要更换文件以及文件里的内容即可。找到文件，修改为一下内容预防过渡渲染解决数据改变时页面闪烁的问题可能存在的问题同时，在后续的版本中，即将从内部移除出去，改为三方包安装使用。开发平台：mac pro node版本：v8.11.2 npm版本：6.4.1 react-native版本：0.57.8 native-echarts版本：^0.5.0 目...

番茄西红柿 2019-04-23 15:10 评论0 收藏0
React Native使用百度Echarts显示图表

摘要：今天我就来介绍下在中如何使用来显示各种图表。首先需要在我们的项目中安装组件，该组件是兼容和安卓双平台的。组件主要有三个属性图表的相关配置和数据。图表的高度，默认值是。解决方法将中的代码修改为同时将文件拷贝到安卓项目下面的文件夹中。本文原创首发于公众号：ReactNative开发圈 Echarts是百度推出的免费开源的图表组件，功能丰富，涵盖各行业图表。相信很多同学在网页端都使用过。今...

Lucky_Boy 2019-08-21 17:27 评论0 收藏0
分享一个用react-native写的app,适合新手学习react-native

摘要：安卓系统的信息系统的信息项目部分截图项目源代码公共组件首页所有图片登录页我的页新闻页配置省市区文件进入轮播页项目入口文件项目依赖配置最新生成的文件信息上次打包的版本路由配置文件 github地址：https://github.com/cryingbat/... react-native-app use react-native。Pack of the generated apk ins...

李涛 2019-08-22 18:12 评论0 收藏0
响应式 React Native Echarts 组件

摘要：额外的三个参数赋给的参数对象，发生变化后内部会自动调用，实现响应式刷新。利用，实现了通知执行在中，可利用实现的事件向组件的通信。一种在 React Native 中封装的响应式 Echarts 组件，使用与示例请参见：react-native-echarts-demo 近年来，随着移动端对数据可视化的要求越来越高，类似 MPAndroidChart 这样的传统图表库已经不能满足产品...

plokmju88 2019-08-22 18:41 评论0 收藏0