解决方案
render.js
- renderjs是运行在视图层的js,在视图层操作dom,运行for web的js库。
- 基本使用
- 设置 script 节点的 lang 为 renderjs,并为该节点设置module值进行命名
<script module="demo" lang="renderjs">
export default {
methods: {
chartDataHandler (value) {
},
emitData (e, ownerInstance) {
ownerInstance.callMethod('receiveRenderData', { data: 'fromRender' })
}
}
}
</script>
- renderjs层与service层通信:
- service -> renderjs:在页面中监听指定数据,在其变化时自动触发renderjs的方法
- renderjs -> service:调用ownerInstance.callMethod,触发service层对应处理函数
<template>
<view :toRender="chartData" :change:toRender="demo.chartDataHandler"></view>
<view @click="demo.emitData"></view>
</template>
<script>
export default {
data () {
return {
chartData: {}
},
methods: {
receiveRenderData (val) {
}
}
}
}
</script>
代码示例
<template>
<view
id="chart-box"
:toRender="chartData"
:change:toRender="emptyRender.initChart"
>
</view>
</template>
<script>
export default {
data () {
return {
chartData: {}
}
},
mounted () {
this.getDetail()
},
methods: {
async getDetail() {
try {
const res = await $http_get(url, params)
this.chartData = res.data
} catch (e) {
$handle_err(e)
}
}
}
}
</script>
<script module="emptyRender" lang="renderjs">
import * as echarts from 'echarts';
export default {
methods: {
initChart(value) {
const dom = document.getElementById('chartWrapper')
if (!dom) { return }
echarts.dispose(dom);
const chart = echarts.init(dom);
chart.setOption({
xAxis: {
type: 'category',
data: value.xAxis,
},
yAxis: {
type: 'value'
},
series: [{
data: value.yAxis,
type: 'line'
}]
})
}
}
}
</script>
<style>
#chart-box{
width: 800rpx;
height: 600rpx;
}
</style>