echarts在uniapp中使用安卓真机运行时无法显示的问题

• 前言：我们在uniapp中开发的时候，开发的时候很正常，echarts的图形在h5页面上也是很正常的，但是当我们打包成安卓app或者使用安卓真机运行的时候，图形根本就没有渲染出来。以下是我的解决方法，摸索了两天，终于在我不懈的努力下搞定了

一、实现效果

二、话不多说，上源码

1、echarts代码必须写在 lang="renderjs"的script 中，调用的时候必须在:change中调用<script module="renderScript" lang="renderjs">

<template><view class="content"><view class="taskModel"><view class="chat" id="chat1" :msg="msg1" :change:msg="renderScript.initChart"></view><view class="chatText">填报</view></view><view class="taskModel"><view class="chat" id="chat2" :msg="msg2" :change:msg="renderScript.initChart"></view><view class="chatText">审批</view></view><view class="taskModel"><view class="chat" id="chat3" :msg="msg3" :change:msg="renderScript.initChart"></view><view class="chatText">通知</view></view></view>
</template>
<script>
export default {components:{Calendar},data() {this.chat1 = nullreturn {msg1: 1,msg2: 1,msg3: 1};},created() {// 调用方法 this.getUnSuccTask()},methods: {// 未完成任务getUnSuccTask(){// 这里是请求方法this.$store.dispatch('actioncore/cpcGetApi', {url: '/user/PhoneDJTodoCount',param: null}).then(res => {if(res.data  != null){var approval = (res.data.approval != null && res.data.approval !== '') ? res.data.approval: 0;var meeting = (res.data.meeting != null && res.data.meeting !== '') ? res.data.meeting: 0;var todos = (res.data.todos != null && res.data.todos !== '') ? res.data.todos: 0;var total = approval+meeting+todosvar msg1 = { // 填报total: total == 0 ? 100 : total,val: todos,}var msg2 = { // 审批total: total == 0 ? 100 : total ,val: approval,}var msg3 = { // 通知total: total == 0 ? 100 : total,val: meeting,}this.msg1 = msg1this.msg2 = msg2this.msg3 = msg3}}).catch(() => {})}},
};
</script>
<script module="renderScript" lang="renderjs">
import {getIndexYH} from '@/utils/chartOptions.js'
import * as echarts from 'echarts'export default {methods: {// 这里也可以在renderjs中mounted中调用，但是只是初始化initChart(newValue, oldValue, ownerVm, vm) {if (newValue == 1) {return;}var option = {title: [{text: '{a|'+cuVal+'}',show: true,x: 'center',y: 'center',textStyle: {rich: {a: {fontSize: 14,color: '#5A75E1',padding: [0, 0,0, 0],fontWeight: 'bold' }},},},],polar: {center: ['50%', '50%'],radius: ['75%', '100%'],},angleAxis: {max: maxVal,show: false,},radiusAxis: {type: 'category',show: true,axisLabel: {show: false,},axisLine: {show: false,},axisTick: {show: false,},},series: [{name: '',type: 'bar',roundCap: true,showBackground: true,backgroundStyle: {color: '#FFF',},data: [cuVal],coordinateSystem: 'polar',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: '#5A76FF',},{offset: 1,color: '#AEC7FA',},]),},},},{name: '',type: 'gauge',radius: '54%',axisLine: {lineStyle: {color: [],width: 1,},},axisLabel: {show: false,},axisTick: {show: false,},splitLine: {show: false,}}],};var chart = echarts.init(document.getElementById(vm.$el.id))chart.setOption(option)}},};
</script>