俺铁牛
俺铁牛
  • 发布:2020-12-30 10:46
  • 更新:2020-12-30 12:40
  • 阅读:689

【咨询问题】renderjs中怎么才能使用‘5+api’

分类:HTML5+

hxdm,在renderjs中不能使用uni api这个文档里有提示,总不能连5+ 的api不能用吧,有小伙伴知道或已经实现了吗?

<template>  
    <view class="content">  
        <!-- <u-mask :show="loading" :duration="400" :custom-style="{background: 'rgba(255, 255, 255, 0.9)'}"></u-mask> -->  
         <!-- :prop="option" -->  
        <view @click="echarts.onClick" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>  
    </view>  
</template>  

<script module="echarts" lang="renderjs">  
    var that, myChart;  
    const modal = weex.requireModule('modal')  
    export default {  
        data() {  
            return {  
                option: {},  
                loading: true,  
                btn: '更新数据',  
                deviceId: '', // 蓝牙设备ID  
                serviceId: '', // 服务ID  
                readId: '', // 服务特征ID:读  
                notifyId: '', // 服务特征ID:通知  
                writeId: '', // 服务特征ID:写  
            }  
        },  
        mounted() {  
            modal.toast({  
                message: '哈哈哈哈哈',  
                duration: 1.5  
            })  
            that = this  
            console.log('开始啦');  
            document.addEventListener('plusready', function(){  
                plus.nativeUI.toast("I'am toast information!");  
            });  
            setTimeout(()=> {  
                this.loading = false  
            }, 400)  
            if (typeof window.echarts === 'function') {  
                that.initEcharts()  
            } else {  
                // 动态引入较大类库避免影响页面展示  
                const script = document.createElement('script')  
                // view 层的页面运行在 www 根目录,其相对路径相对于 www 计算  
                script.src = 'static/js/echarts.min.js'  
                script.onload = that.initEcharts.bind(that)  
                document.head.appendChild(script)  
            }  
        },  
        methods: {  
            initEcharts() {  
                myChart = echarts.init(document.getElementById('echarts'))  
                // 观测更新的数据在 view 层可以直接访问到  
                function randomData() {  
                    now = new Date(+now + oneDay);  
                    value = value + Math.random() * 21 - 10;  
                    return {  
                        name: now.toString(),  
                        value: [  
                            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),  
                            Math.round(value)  
                        ]  
                    };  
                }  
                var data = [];  
                var now = +new Date(1997, 9, 3);  
                var oneDay = 24 * 3600 * 1000;  
                var value = Math.random() * 100;  
                for (var i = 0; i < 1000; i++) {  
                    data.push(randomData());  
                }  
                that.option = {  
                    title: {  
                        text: '动态数据 + 时间坐标轴'  
                    },  
                    xAxis: {  
                        type: 'time',  
                        splitLine: {  
                            show: false  
                        }  
                    },  
                    yAxis: {  
                        type: 'value',  
                        boundaryGap: [0, '100%'],  
                        splitLine: {  
                            show: false  
                        }  
                    },  
                    series: [{  
                        name: '模拟数据',  
                        type: 'line',  
                        showSymbol: false,  
                        hoverAnimation: false,  
                        data: data  
                    }]  
                }  
                // setInterval(()=> {  
                //  for (var i = 0; i < 2; i++) {  
                //      data.shift();  
                //      data.push(randomData());  
                //  }  
                //  myChart.setOption({  
                //      series: [{  
                //          data: data  
                //      }]  
                //  });  
                // }, 80);  
                myChart.setOption(that.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>
2020-12-30 10:46 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com

echarts别用renderjs渲染坑很深,多点几次你就知道了,内存吃得很厉害,且退出都不能释放,必须重启手机.
建议采用canvas方式 mpvue-echarts那个组件来调

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