• uni使用render.js视图层与逻辑层传数据 的问题


    官方文档写的太朦胧了。就是说用this.$ownerInstance.callMethod。只能用官方的例子了。

    template部分

    	<view class="content">
    		<!-- #ifdef APP-PLUS || H5 -->
    		<!--option 是逻辑层向视图图传输的参数    updateEcharts用于监听变化-->
    		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
    		<button @click="changeOption">更新数据</button>
    		<!-- #endif -->
    		<!-- #ifndef APP-PLUS || H5 -->
    		<view>非 APP、H5 环境不支持</view>
    		<!-- #endif -->
    	</view>
    

      逻辑层js

    <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) } } }
    </script>

    render.js

    <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)
                }
            },
            methods: {
                initEcharts() {
                    myChart = echarts.init(document.getElementById('echarts'))
                    // 观测更新的数据在 view 层可以直接访问到
                    myChart.setOption(this.option)
                },
                updateEcharts(newValue, oldValue, ownerInstance, instance) {
                    // 监听 service 层数据变更
                    console.log(newValue, oldValue)
                    myChart.setOption(newValue)
                },
                onClick(event, ownerInstance) {
                    // 调用 service 层的方法
                    this.$ownerInstance.callMethod('onViewClick', {
                        test: 'test'
                    })
                }
            }
        }
    </script>
    

    就可以了

  • 相关阅读:
    matlab播放音乐
    virtualbox安装增强功能时【未能加载虚拟光盘】
    VirtualBox piix4_smbus Error
    VirtualBox虚拟机运行Ubuntu如何不卡
    微信支付注意事项
    ListView实现RadioButton的单选效果
    他山之石____Java 线程池的原理与实现
    线程池的使用____银行业务调度系统
    基础加强____【动态代理 & AOP】【实现类Spring的AOP框架】
    基础加强____【Java类加载器 & "委托机制"】
  • 原文地址:https://www.cnblogs.com/huzhuhua/p/15109808.html
Copyright © 2020-2023  润新知