解决方案

render.js

• renderjs是运行在视图层的js，在视图层操作dom，运行for web的js库。
• 基本使用
  • 设置 script 节点的 lang 为 renderjs，并为该节点设置module值进行命名

    <script module="demo" lang="renderjs">
    	export default {
    		methods: {
    			chartDataHandler (value) {
    				// value是监听的chartData数据
    			},
    			emitData (e, ownerInstance) {
    				// 调用ownerInstance.callMethod，向逻辑层发送数据
    				// 逻辑层触发receiveRenderData函数接收
    				ownerInstance.callMethod('receiveRenderData', { data: 'fromRender' })
    			}
    		}
    	}
    </script>
    

    • renderjs层与service层通信：
      • service -> renderjs：在页面中监听指定数据，在其变化时自动触发renderjs的方法
      • renderjs -> service：调用ownerInstance.callMethod，触发service层对应处理函数

    <template>
    	<!--
    		监听chartData数据，该数据来源于逻辑层；toRender可以随便命名，但要和:change:[dataName]中dataName保持一致
    		:change: 当chartData发生变化时，调用renderjs中定义的chartDataHandler方法，demo和module中的命名对应
    	 -->
    	<view :toRender="chartData" :change:toRender="demo.chartDataHandler"></view>
    	<!-- 向逻辑层发送数据 -->
    	<view @click="demo.emitData"></view>
    </template>
    
    <!-- 逻辑层 -->
    <script>
    export default {
    	data () {
    		return {
    			chartData: {}
    		},
    		methods: {
    			receiveRenderData (val) {
    				// 接收render层发来的数据
    			}
    		}
    	}
    }
    </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) { // value: 监听的chartDate数据，来自service层
	       		const dom = document.getElementById('chartWrapper')
				if (!dom) { return }
	      			echarts.dispose(dom); //销毁echarts实例
				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>