官方文档写的太朦胧了。就是说用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] }] } } }, onl oad() { }, 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>
就可以了