uniapp打包发布至app端 echarts图表不显示问题

2024-05-16 10:37:23

原因：uni中非web端运行在V8引擎中，不支持web端的window、document、navigator等浏览器的API，只支持标准ES语法。因此借助网上的参考，进行Echarts组件封装，借助renderjs 在视图层操作dom ，进行Echarts实例初始化，并将配置数据定义在主script中的data中，在主script中进行数据的处理。

解决方法：

renderjs

一、xml

二、data数据

三、script导入

四、源码

<template>
   <view class="content">
       <view
       :prop="option"
       :change:prop="echarts.updateEcharts"
       id="echarts"
       class="echarts"
       ></view>
   </view>
</template>

<script>
   export default {
       data() {
           return {
               option : {
                   grid: {
                   top: '0',
                   left: '0',
                   right: '0',
                   bottom: '0',
                   },
                   title: {
                   text: '',
                   subtext: '',
                   x: 'center'
                   },
                   legend: {
                   orient: 'horizontal',
                   icon: "circle",
                   textStyle: {
                       color: 'rgba(102, 102, 102, 1)',
                           padding: [0, 0, 0, -8],
                       fontSize: 12
                   },
                   itemHeight: 6,
                   left: '10%', //图例距离左的距离
                   y: '90%', //图例上下居中
                   data: ["投礁型","田园型","游钓型","底播型","装备型"]
                   },
                   color: ['rgba(156, 107, 250, 1)', 'rgba(88, 227, 154, 1)', 'rgba(248, 202, 93, 1)',
                           'rgba(105, 222, 219, 1)', 'rgba(218, 114, 204, 1)'],//五个数据，五个颜色
                   series: [
                   {
                       name: '',
                       type: 'pie',
                       radius: ['40%', '65%'], //图的大小
                       center: ['50%', '50%'], //图的位置，距离左跟上的位置
                       data:[
                       {
                           name:"投礁型",
                           value:'10'
                       },
                       {
                           name:"田园型",
                           value:'8'
                       },
                       {
                           name:"游钓型",
                           value:'9'
                       },
                       {
                           name:"底播型",
                           value:'5'
                       },
                       {
                           name:"装备型",
                           value:'6'
                       }
                       ]
                   }
                   ]
               },}
       }
   }
</script>

<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() {
               setTimeout(() => {
               myChart = echarts.init(document.getElementById('echarts'))
               // 观测更新的数据在 view 层可以直接访问到
               myChart.setOption(this.option)
               })
               // 这里是用于窗口变化时的自适应，利用的是echarts自带的resize方法
               window.addEventListener('resize', () => {
                   myChart.resize()
               });

           },
           updateEcharts(newValue, oldValue, ownerInstance, instance) {
               // 监听 service 层数据变更
               if(myChart) {
               myChart.setOption(newValue)
               window.addEventListener('resize', () => {
                   myChart.resize()
               });
               }
           },
           onClick(event, ownerInstance) {
               // 调用 service 层的方法
               ownerInstance.callMethod('onViewClick', {
                   test: 'test'
               })
           }
       }
   }
</script>

<style>
   .echarts {
       width: 100%;
       height: 434rpx;
   }
</style>

uniapp打包发布至app端 echarts图表不显示问题相关推荐

(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
vue 工程中加入 echarts 图表不显示的问题
vue 工程中加入 echarts 图表不显示的问题一.问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式二.vue工程使用echarts vue官方教程 1. 安装 ...
小程序开发华为P20、voiv下Echarts图表不显示数据、坐标轴等问题
背景:小程序开发 BUG:华为P20.viov手机系统下Echarts图表不显示数据.坐标轴等问题.如下图: 解决方案:WXML中使用的ec-canvas标签加入属性force-use-old-can ...
Echarts图表不显示
Echarts图表不显示 div标签的style属性设置有问题 <div id="chart-user" style="width:500px; height:50 ...
echarts 图表不显示数据，显示了一个表情
echarts图表不显示数据,显示了一个表情背景描述使用echarts进行数据统计和展示,但是在使用过程中,发现图表并没有成功绘制,而是只显示了一个表情如下图原因: 图表的div宽度太宽了,di ...
uniapp App端 echarts 设置tooltip的formatter不生效问题及解决办法
一.开发需求在App端实现,图表的tooltip提示框中展示数值的单位.如下图: 二.遇到的问题 1.首先想到的是对tooltip进行相关的设置,然后试了两种方式,都没有效果. (1)设置toolt ...
2021.09.18-前端-uni-app打包发布后gzip成倍压缩方案
开局一个引用原文链接:https://blog.csdn.net/qq_43363884/article/details/108195408. 上面此文章讲到自动化压缩并加载的时候解压包. 本文主要介 ...
uni-app打包发布Android版本
一. 查看编辑代码的HBuilder X工具的版本(帮助 --> 关于) 下载Android离线SDK地址注意:您下载的Android离线SDK版本需要与你HBuilder X 开发工具一致 ...
echarts图表中显示图例lengend
legend:{},series: [{name: '成交',type: 'line',data: [10, 12, 21, 54, 260, 830, 710]},{name: '预购',type: ...

最新文章

热门文章