native-echarts 問題彙總

時間  2019-12-10
標籤 native echarts 問題 彙總 简体版
原文   原文鏈接

一.當width 和 height 設置的不對的時候，會出現邊框線如圖所示：

解決辦法：Echarts/index.js文件中html

<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改成node

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

五 修改圖例顏色

react-native-echarts 修改圖例顏色首先要修改itemStyle的顏色react

六 解決頻繁刷新

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

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的屬性injectedJavaScriptreact-native

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

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

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)
添加echarts

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

添加後post

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添加屬性flex

onMessage={this.onMessage}

添加事件ui

// 添加點擊事件
    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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程