原因：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图表不显示问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。