三星S8图表echarts不显示

yrjwcharm commented 1 year ago

部分android机型不渲染求在线救急呀

moon-xt commented 1 year ago

贴代码

supervons commented 1 year ago

为了便于沟通，请先参考下 issue 规范：https://github.com/supervons/react-native-echarts-pro/issues/6

yrjwcharm commented 1 year ago

@supervons 我感觉这个库里那个webview source用js注入html 属性的方式不靠谱

代码实例

const Example = () => {
    const myChart = useRef();
    const barOption = {
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'shadow',
        //     },
        // },
        grid: {left: 0, right: 0, bottom: 0, containLabel: true},
        animation: true, //设置动画效果
        animationEasing: 'linear',
        dataZoom: [
            {
                type: 'inside',
                zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
                throttle: 100, //设置触发视图刷新的频率。单位为毫秒（ms）
            },
        ],
        xAxis: {
            nameLocation: 'end',
            show: false,
            inside: true, //刻度内置
            boundaryGap: true,
            type: 'category',
            axisTick: {
                show: false, // 不显示坐标轴刻度线
                alignWithLabel: true,
            },
            axisLabel: {
                // rotate: 70,
                boundaryGap: false,
                show: true, // 不显示坐标轴上的文字
                color: Colors.lightGrayColor,
                fontFamily: Font.numMedium,
                fontWeight: '500',
                fontSize: 9,
                align: 'left',
                margin: 8,
                showMaxLabel: true,
            },
            axisLine: {
                lineStyle: {
                    color: '#BDC2CC',
                    width: 0.5,
                },
            },
            data: ['2011-01-02', '2011-01-03'],
        },
        yAxis: {
            // scale: true,
            boundaryGap: false,
            type: 'value',
            // position: 'left',
            // min: minVal, // 坐标轴刻度最小值。
            // max: maxVal, // 坐标轴刻度最大值。
            splitNumber: 5, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
            // interval: interval, // 强制设置坐标轴分割间隔。
            axisLabel: {
                show: false, // 不显示坐标轴上的文字
                // margin: 0,
            },
            splitLine: {
                lineStyle: {
                    color: '#E9EAEF',
                    width: 0.5,
                },
                show: true,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                length: 5,
            },
        },
        series: [
            {
                large: true,
                largeThreshold: 1000,
                type: 'bar',
                barWidth: 6,
                // barGap: '8%',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            //根据数值大小设置相关颜色
                            if (params.value > 0) {
                                return '#E74949';
                            } else {
                                return '#4BA471';
                            }
                        },
                    },
                },
                markPoint: {
                    symbol: 'circle',
                    symbolSize: 8,
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        normal: {
                            color: Colors.red,
                            borderColor: Colors.white,
                            borderWidth: 1, // 标注边线线宽，单位px，默认为1
                        },
                    },
                    data: [],
                },
                data: [200, 300],
            },
        ],
    };
    return (
        <RNEChartsPro
            onDataZoom={(result, option) => {
                const {startValue} = option.dataZoom[0];
            }}
            legendSelectChanged={(result) => {}}
            onPress={(result) => {}}
            ref={myChart}
            width={deviceWidth - px(58)}
            height={px(300)}
            onMousemove={() => {}}
            onFinished={() => {}}
            onRendered={() => {}}
            option={barOption}
        />
    );
};
export default Example;

package.json 里

ios正常

android 三星不显示。红米也不正常

yrjwcharm commented 1 year ago

@supervons @XT-0515 尽快帮忙看下

moon-xt commented 1 year ago

@supervons @XT-0515 尽快帮忙看下

webViewSettings={{androidLayerType: 'software'}} 试试？

yrjwcharm commented 1 year ago

@supervons @XT-0515 尽快帮忙看下

webViewSettings={{androidLayerType: 'software'}} 试试？不好使

yrjwcharm commented 1 year ago

@supervons @XT-0515 这块问题是否参考这个？ http://t.zoukankan.com/bruce-gou-p-9271969.html

supervons commented 1 year ago

可能同这个问题：https://github.com/supervons/react-native-echarts-pro/issues/86

Android 6 版本浏览器内核对于 ES6 语法支持不全。

但是你的不渲染是部分不渲染还是都不渲染呢？可以告知下版本信息吗？

supervons commented 1 year ago

@yrjwcharm 解决了吗？没有的话，提供下机型安卓版本信息，代码示例最好是一个单页面可运行的页面，移除自定义的JS引用。

supervons / react-native-echarts-pro