thr_jin
thr_jin
  • 发布:2021-10-13 17:42
  • 更新:2023-11-08 19:21
  • 阅读:1970

renderjs-echarts-demo 在APP端和H5上的点击事件

分类:uni-app

demo就是官方提供的demo,
主要就是在main.js中加
//#ifdef H5
window.wx = {}
//#endif
但是加了是否会出现其他的问题,暂时不知道..

解决方案是在CSDN上看到的,具体原因不在解释;看图片
代码部分

<script>  
export default {  
    .......,  
    methods:{  
       onViewClick(options) {  
      console.log(options)  
    }  
    }  
}  
</script>  

<script module="echarts" lang="renderjs">  
    let myChart  
    export default {  
        data() {  
            return {  
                clickData: null  
            }  
        },  
        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 层可以直接访问到  
                let _this = this;  
                myChart.setOption(this.option);  

                myChart.on('click', function(e) {  
                    _this.clickData = e;  
                })  
            },  
            updateEcharts(newValue, oldValue, ownerInstance, instance) {  
                // 监听 service 层数据变更  
                myChart.setOption(newValue);  
            },  
            onClick(event, ownerInstance) {  
                // 调用 service 层的方法  
                let _this = this;  
                ownerInstance.callMethod('onViewClick', {  
                    name : _this.clickData.name,  
                    val : _this.clickData.value  
                })  
            }  
        }  
    }  
</script>
0 关注 分享

要回复文章请先登录注册

aak12345

aak12345

https://uniapp.dcloud.net.cn/api/window/communication.html uni主动发消息给iframe,可以在renderjs里面添加uni.$on,然后在uni里面uni.$emit
2023-11-08 19:21
wxcx

wxcx

# 好用
2023-05-15 16:33
wxcx

wxcx

#好用
2023-05-15 16:33