grinTvT
grinTvT
  • 发布:2020-03-25 23:34
  • 更新:2021-02-26 13:42
  • 阅读:1526

#插件讨论# 【 renderjs-echarts-demo - 瞳player 】app 不能调用外部函数

分类:uni-app

暂时的的解决方法:

<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]
}],
dataZoom: [{
start: 0,
end: 60,
type: 'inside'
}]
}
}
},
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, 1)  
        }  
    }  
}  

</script>

<script module="echarts" lang="renderjs">
let myChart
export default {
data() {
return {
clickEvent: null,
datazoomEvent: 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 层可以直接访问到
myChart.setOption(this.option)
myChart.on('click', (event) => {
this.clickEvent = event
})
myChart.on('datazoom', event => {
this.datazoomEvent = event
});
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
onClick(event, ownerInstance) {
if (!this.clickEvent) {
return
}
const {
event: _events,
...datas
} = this.clickEvent
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', datas)
this.clickEvent = null
},
onDatazoom(event, ownerInstance) {
if (!this.datazoomEvent) {
return
}
const {
event: _events,
...datas
} = this.datazoomEvent
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', datas)
this.datazoomEvent = null
}
}
}
</script>

2020-03-25 23:34 负责人:无 分享
已邀请:
只吃蛋糕的狐

只吃蛋糕的狐

请问解决了吗

圣名科技

圣名科技

我将楼主的js格式化了一下,我还没试行不行
正常js

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]  
                    }],  
                    dataZoom: [{  
                        start: 0,  
                        end: 60,  
                        type: 'inside'  
                    }]  
                }  
            }  
        },  
        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, 1)   
            }   
        }   
    }

renderjs

let myChart   
    export default {   
        data() {   
            return {   
                clickEvent: null,   
                datazoomEvent: 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 层可以直接访问到   
                myChart.setOption(this.option)   
                myChart.on('click', (event) => { this.clickEvent = event })   
                myChart.on('datazoom', event => { this.datazoomEvent = event });  
            },   
            updateEcharts(newValue, oldValue, ownerInstance, instance) { // 监听 service 层数据变更   
                myChart.setOption(newValue) },   
                onClick(event, ownerInstance) {   
                    if (!this.clickEvent) { return }   
                    const { event: _events, ...datas } = this.clickEvent ,  
                // 调用 service 层的方法   
                ownerInstance.callMethod('onViewClick', datas)   
                this.clickEvent = null   
            },   
            onDatazoom(event, ownerInstance) {  
                if (!this.datazoomEvent) { return }   
                const { event: _events, ...datas } = this.datazoomEvent ,  
                 // 调用 service 层的方法   
                 ownerInstance.callMethod('onViewClick', datas)   
                 this.datazoomEvent = null   
            }   
        } ,  
    }

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