uniapp中加载Echarts图表H5可以显示正常图表, 打包app图表不显示的问题

uniapp 打包成apk echarts需要使用render.js

在使用 UniApp 将应用打包成 APK 时,如果你在应用中使用了 ECharts 图表库,可能会需要使用 render.js 文件。ECharts 是一个基于 JavaScript 的数据可视化库,它可以用于在网页中创建各种类型的交互式图表和数据可视化展示。

在 UniApp 中,由于多端适配的特性,ECharts 需要通过 render.js 文件来进行多端的适配工作。这个 render.js 文件会根据当前的运行环境来选择合适的渲染方式,以确保 ECharts 在不同平台下都能正常显示和交互。这意味着在打包成 APK 时,需要确保 render.js 文件能够正确地适配到 Android 平台。

因此,如果你在 UniApp 中使用 ECharts,并且希望将应用打包成 APK,确保在打包过程中包含了 render.js 文件,并且在使用 ECharts 时按照文档要求正确配置 render.js,以确保图表库能够在 APK 中正常运行和显示。

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

<script>
    export default {
		props: {
			echartsPhaseData1: Object,
			phaseCont:String
		},
        data() {
            return {
				seriesTemp:[[],[],[]],
                option :  {
				    animation: false,
					title:{
						subtext: "t(ms)",
						right: 0,
						bottom: 0,
						subtextStyle: {
						  fontSize: 12,
						  fontWeight:"normal"
						},
					},
				    grid: {
						top: 40,
						left: 20,
						right: 45,
						bottom: 4,
						show: true,
						borderColor:"#000",
						borderWidth:1,
						zlevel:99,
						containLabel: true
				    },
				    xAxis: [{
						name: '',
						nameTextStyle:{
							color:"#999"
						},
						type: 'category',				
						boundaryGap: false,
						axisTick: {
							show:false,
							alignWithLabel: true
						},
						axisLine: {
							lineStyle: {
							  color: "#000"
							}
						},
						axisLabel: {
						  interval: 6,
						} ,
						splitLine: {
							show: true,
						},
						// prettier-ignore
						data: ['0', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '20']
					}],
					yAxis: [{
						name: 'U(V)',
						nameTextStyle:{
							color:"#999"
						},
						minorTick: {
						  show: false
						},
						type: "value",
						axisTick: {
						  show: false
						},
						splitLine: {
						  show: true,
						},
						axisLine: {
						  show: false,
							lineStyle: {
							  color: "#000"
							}
						},
					}],
				    series: [
						{
							type: 'line',
							showSymbol: false,
							smooth: 1,
							color:"#FFB900",
							clip: true,	
							data: []
						},
						{
							type: 'line',
							showSymbol: false,
							smooth: 1,
							color:"#17874A",
							clip: true,
							data: []
						},
						{
							type: 'line',
							showSymbol: false,
							smooth: 1,
							color:"#CD3F3F",
							clip: true,
							data: []
						}
				    ]
				},}
        },
		
		watch: {
			//watch事件监听,可以监听data里的值,可以监听props里传来的值
			
			phaseCont:{
				handler(newValue, oldValue) {
				},
				deep: true
			},
			echartsPhaseData1: {
				handler(newValue, oldValue) {
					
				},
				deep: true
			},
		},
		
		
		methods: {	
		}
    }
</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/js/echarts.min.js'
                script.onload = this.initEcharts.bind(this)
                document.head.appendChild(script)
            }
       
        },
        methods: {
			func2(x) {
			  x /= 10;
			  return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
			},
			generateData2() {
			  let data = [];
			  for (let i = 0; i <= 200; i += 0.1) {
			    data.push([i, this.func2(i)]);
			  }
			  return data;
			},
			
			func3(x) {
			  x /= 20;
			  return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
			},
			generateData3() {
			  let data = [];
			  for (let i = 0; i <= 200; i += 5) {
			    data.push([i, this.func3(i)]);
			  }
			  return data;
			},
            initEcharts() {
                setTimeout(() => {
                  myChart = echarts.init(document.getElementById('echartsa'))
                  // 观测更新的数据在 view 层可以直接访问到
                  myChart.setOption(this.option)
				  myChart.resize()
				  // this.option.series[1].data = "";
                },300)
                // 这里是用于窗口变化时的自适应,利用的是echarts自带的resize方法
                window.addEventListener('resize', () => {
                    myChart.resize()
                });
                
            },
            updateEcharts(newValue, oldValue, ownerInstance, instance) {
                // 监听 service 层数据变更
                if(myChart) {
					setTimeout(() => {
						console.log(newValue,"series11")
						myChart.setOption(newValue)
						myChart.resize()
					},300)
                  
                  window.addEventListener('resize', () => {
                      myChart.resize()
                  });
                }
            },
            onClick(event, ownerInstance) {
                // 调用 service 层的方法
                ownerInstance.callMethod('onViewClick', {
                    test: 'test'
                })
            }
        }
    }
</script>

<style>
    .echarts {
        width: 690upx;
        height: 434rpx;
    }
</style>

  • 9
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用uni-app提供的插件uni-echarts来在H5页面使用echarts。具体步骤如下: 1. 安装uni-echarts插件:在HBuilderX打开项目,点击菜单栏的工具 -> 插件市场,在搜索框输入uni-echarts,点击安装即可。 2. 在需要使用echarts的页面引入echarts库和uni-echarts组件: ```html <template> <view> <uni-echarts :option="option" :height="300px"></uni-echarts> </view> </template> <script> import * as echarts from 'echarts'; import uniEcharts from '@/components/uni-echarts/uni-echarts.vue'; export default { components: { uniEcharts }, data() { return { option: { // echarts配置项 } } }, mounted() { // 初始化echarts实例 const chart = echarts.init(this.$refs.echarts); // 设置option chart.setOption(this.option); } } </script> ``` 3. 在option配置echarts图表的相关参数,例如: ```javascript option: { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值