天意弄人
天意弄人
  • 发布:2020-12-12 10:22
  • 更新:2021-05-27 10:14
  • 阅读:2379

uniapp 关于renderjs-echarts 和 renderjs 在app-plus端 数据交互的问题

分类:uni-app

今天用了 renderjs-echarts-demo 这个插件发现个问题

<template>  
    <view class="content">  
               {{echarts==undefined}}  
        <!-- #ifdef APP-PLUS || H5 -->  
        <view @click="myClick($event)" :prop="option" :change:prop="echarts.updateEcharts" id="echarts111" class="echarts"></view>  
        <button @click="changeOption">更新数据</button>  
        <!-- #endif -->  
        <!-- #ifndef APP-PLUS || H5 -->  
        <view>非 APP、H5 环境不支持</view>  
        <!-- #endif -->  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                option: {  
                    title: {  
                        text: 'ECharts 入门示例'  
                    },  
                    tooltip: {},  
                    legend: {  
                        data: ['销量']  
                    },  
                    xAxis: {  
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]  
                    },  
                    yAxis: {},  
                    series: [{  
                        name: '销量',  
                        type: 'bar',  
                        data: [5, 20, 36, 10, 10, 20]  
                    }]  
                }  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            changeOption() {  
                const data = this.option.series[0].data  
                // 随机更新示例数据  
                data.forEach((item, index) => {  
                    data.splice(index, 1, Math.random() * 40)  
                })  
            },  
            onViewClick(options) {  
                console.log(options)  
            },  
            myClick(e){  
                console.log('myClick')  
                console.log(this._uid+'myClick');  
                console.log(echarts);  
                //this.echarts.onClick(e,this.$ownerInstance)  
            }  
        }  
    }  
</script>  

<script module="echarts" lang="renderjs">  
    let myChart  
    export default {  
        mounted() {  
            if (typeof window.echarts === 'function') {  
                this.initEcharts()  
            } else {  
                // 动态引入较大类库避免影响页面展示  
                const script = document.createElement('script')  
                // view 层的页面运行在 www 根目录,其相对路径相对于 www 计算  
                script.src = 'static/echarts.js'  
                script.onload = this.initEcharts.bind(this)  
                document.head.appendChild(script)  
            }  
            console.log(this._uid+'echarts');  
        },  
        methods: {  
            initEcharts() {  
                myChart = echarts.init(document.getElementById('echarts111'))  
                // 观测更新的数据在 view 层可以直接访问到  
                myChart.setOption(this.option)  
            },  
            updateEcharts(newValue, oldValue, ownerInstance, instance) {  
                // 监听 service 层数据变更  
                myChart.setOption(newValue)  
            },  
            onClick(event, ownerInstance) {  
                // 调用 service 层的方法  
                ownerInstance.callMethod('onViewClick', {  
                    test: 'test'  
                })  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .echarts {  
        margin-top: 100px;  
        width: 100%;  
        height: 300px;  
    }  
</style>

在内置浏览器 H5调试下没有问题,但在手机上app-plus 真机调试,发现总是报 echarts is not defined ,
我试了下,App-plus运行echarts的确是undefined。
求解为啥会出现这种情况啊??

2020-12-12 10:22 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com

遇到同样的问题,请问解决了吗

  • 天意弄人 (作者)

    我们换u-charts 了,和echarts 差不多。

    2021-08-09 14:57

herenowts

herenowts - 1

同样有类似问题,非常迷茫,临时想了办法
视图加了<view :prop="changeTag" :change:prop="test.changeTagNotify "></view>
逻辑层理想调用视图刷新时候,就去改 changeTag 存了个时间戳确保每次都变, 下面就会调用 changeTagNotify;
在改 changeTag 之前 plus.storage.setItem('changeTagNotifyAction', JSON.stringify(actionObj));
当 changeTag 改变后, changeTagNotify 就去 读取 changeTagNotifyAction 内容以做相应处理;

我就当加了个通知中心了

粽子i

粽子i

这个解决了吗

  • 陌上华年

    试一下这个?

    https://ext.dcloud.net.cn/plugin?id=4899

    2021-05-27 10:21

该问题目前已经被锁定, 无法添加新回复