首页 前端知识 解决uni-app中使用echarts时,无法在真机上显示问题

解决uni-app中使用echarts时,无法在真机上显示问题

2024-02-28 11:02:25 前端知识 前端哥 56 81 我要收藏

文章目录

  • 解决方案
  • 代码示例

解决方案

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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2886.html
标签
uni-app
评论
会员中心 联系我 留言建议 回顶部
复制成功!