echarts uniapp没有dom renderjs解决uniapp无法获取Dom问题
在uni-app的app和h5端,引入完整的echarts,并且提供高性能的动画。
注意事项
- 仅支持 app-vue、h5 端
- 要求 uni-app 2.5.5+以上版本
- app端要求使用v3编译器
过去的问题
H5端流行的echart报表因为涉及大量dom操作,无法跨端使用
wx-chart在跨端和更新方面都不足
插件市场提供了比wx-chart更好的、全端可用的uChart。但受限于小程序架构逻辑层和视图层分离,导致的通信折损,图表的动画性能不佳。并且uchart只实现了echart的常用功能,还有一些功能没有实现。
新的解决方案
从uni-app 2.5.5+起,新提供了renderjs技术。它是wxs的升级版,一种可以运行在视图层的js。
通过renderjs编写的代码,直接运行在视图层(也就是webview中),可以完整的运行echart等库,并且没有了逻辑层和视图层频繁通行的折损,让动画不再卡顿。
renderjs支持app-vue和h5,不支持其他平台。如果你只考虑这2个平台,可以直接使用本示例,使用完整版的echart。如果还要兼容多端小程序,建议仍然使用uchart。
renderjs,不止能运行echart,其他如F2、threejs等web库都可以运行。
使用
<!-- 放置echarts的容器 --> <!-- echarts模块名.事件名 --> <view @click="echarts.onClick" :prop="option" id="echarts" ></view>
//正常写法
<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]
}]
}
}
},
onLoad() {},
methods: {
onViewClick(options) {
console.log(options)
}
}
}
</script>
//将获取dom的操作写在下面这个里面
//类似vue 的 混入 mixin
<script module="echarts" lang="renderjs">
export default {
mounted() {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'static/echarts.js'
//更改作用域
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
// 可以直接拿到正常写法里的数据
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
onClick(event, ownerInstance) {
// 调用 script里正常写法的methods
// ownerInstance.callMethod(方法名,传值)
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue中前端如何实现pdf预览功能(含vue-pdf插件用法)
这篇文章主要给大家介绍了vue中前端如何实现pdf预览功能的相关资料,文中包含vue-pdf插件用法,在前端开发中,很多时候我们需要进行pdf文件的预览操作,需要的朋友可以参考下2023-07-07
vue踩坑记-在项目中安装依赖模块npm install报错
这篇文章主要介绍了vue踩坑记-在项目中安装依赖模块npm install报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vue3使用ResizeObserver监听元素的尺寸宽度变化
要监听 div 宽度的变化,可以使用 ResizeObserver 接口,ResizeObserver 允许你观察一个或多个元素的尺寸变化,并在发生变化时执行回调函数,所以本文给大家介绍了Vue3如何使用ResizeObserver监听元素的尺寸宽度变化,需要的朋友可以参考下2024-08-08
vue2+element ui 中的el-table 选中当前行当前行变色的实现代码
这篇文章主要介绍了vue2+element ui 中的el-table 选中当前行当前行变色的实现代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
vue3 Element Plus中icon图标不显示的解决方案
这篇文章主要介绍了vue3 Element Plus中icon图标不显示的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03


最新评论