?效果：

?思路：

提前在 data 中配置一個暫無數據的 option，然后在初始化 echarts 的時候判斷接口返回數據是否未空，如果為空就 setOption 暫無數據的 option 渲染 dom，否則正常 setOption 接口數據渲染 dom

//data option: {title: {text: "暫無數據",x: "center",y: "center",textStyle: {color: "#fff",fontWeight: "normal",fontSize: 16,},},},// 初始化 async init() {const { registerNum } = this.$route.query;const { data: earningsFigures } = await getEarningsFigures({ registerNum }); // 收益趨勢const option = earningsFigures.length === 0 ? this.option : this.getLeftChartsJson(earningsFigures);const leftCharts = echarts.init(this.$refs.leftCharts);leftCharts.setOption(option);// 屏幕重置大小window.addEventListener("resize", () => {leftCharts.resize();});},

全部代碼：

<template><div class="page"><div class="title">機構業績</div><div class="main-view"><div ref="leftCharts" class="left-charts"></div><div ref="rightCharts" class="right-charts"></div><el-select v-model="value" placeholder="請選擇"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div></div> </template><script> import * as echarts from "echarts"; import { getAnnualPerformance, getEarningsFigures } from "@api/organization";export default {data() {return {value: "",options: [],rightCharts: null,option: {title: {text: "暫無數據",x: "center",y: "center",textStyle: {color: "#fff",fontWeight: "normal",fontSize: 16,},},},};},watch: {value() {if (this.rightCharts) {this.rightCharts.dispose();}this.annualPerformanceInit();},},created() {this.getOptions();},mounted() {this.init();// this.annualPerformanceInit();},methods: {/*** @description: 獲取下拉框options*/async getOptions() {const { registerNum } = this.$route.query;const { data: annualPerformance } = await getAnnualPerformance({ registerNum });this.options = annualPerformance.map(x => {return {value: x.type,label: x.type,};});if (this.options.length === 0) return;this.value = this.options[0].value;},/*** @description: 初始化左側圖表*/async init() {const { registerNum } = this.$route.query;const { data: earningsFigures } = await getEarningsFigures({ registerNum }); // 收益趨勢const option = earningsFigures.length === 0 ? this.option : this.getLeftChartsJson(earningsFigures);const leftCharts = echarts.init(this.$refs.leftCharts);leftCharts.setOption(option);// 屏幕重置大小window.addEventListener("resize", () => {leftCharts.resize();});},/*** @description: 初始化右側圖表*/async annualPerformanceInit() {const { registerNum } = this.$route.query;const { data: annualPerformance } = await getAnnualPerformance({ registerNum }); // 年度業績const arr = ["機構平均收益", "同類平臺收益"].map(name => {return {name: name,dataY: annualPerformance.filter(x => x.type === this.value)[0].performanceData.map(x => x.year),dataX: annualPerformance.filter(x => x.type === this.value)[0].performanceData.map(x => {if (name === "機構平均收益") {return x.comAve.replace(/%/g, "");} else {return x.cateAve.replace(/%/g, "");}}),};});this.rightCharts = echarts.init(this.$refs.rightCharts);this.rightCharts.setOption(this.getRightChartsJson(arr));// 屏幕重置大小window.addEventListener("resize", () => {this.rightCharts.resize();});},/*** @description: 圖表配置*/getLeftChartsJson(earningsFigures) {const list = earningsFigures.map(x => {return {type: x.type,dataY: (x.performanceData && x.performanceData.map(x => x.comAve.replace(/%/g, ""))) || [],dataX: (x.performanceData && x.performanceData.map(x => x.year)) || [],};});const option = {title: {text: "收益趨勢圖",textStyle: {fontSize: "16",fontWeight: "400",color: "#fff",},},grid: {left: "3%",right: "4%",bottom: "1%",top: "34%",containLabel: true, // 防止標簽溢出},legend: {data: list.map(x => x.type),textStyle: {fontSize: "14",fontWeight: "400",color: "#fff",},top: "10%",},tooltip: {formatter: "{a0}<br />{b0}: {c0}%",},xAxis: {data: list[0].dataX,splitLine: {show: false,},axisTick: {show: false,},},yAxis: {splitLine: {lineStyle: { color: "#333" },},},series: list.map(x => {return {name: x.type,type: "bar",data: x.dataY,emphasis: {focus: "series",},animationDelay: function (idx) {return idx * 10;},};}),animationEasing: "elasticOut", // 動畫效果animationDelayUpdate: function (idx) {return idx * 5;},};return option;},getRightChartsJson(arr) {const option = {title: {text: "年度業績",textStyle: {fontSize: "16",fontWeight: "400",color: "#fff",},},tooltip: {formatter: "{a0}<br />{b0}: {c0}%",},legend: {data: arr.map(x => x.name),textStyle: {fontSize: "14",fontWeight: "400",color: "#fff",},top: "10%",},grid: {left: "3%",right: "4%",bottom: "1%",top: "34%",containLabel: true,},xAxis: {type: "value",splitLine: {lineStyle: { color: "#333" },},},yAxis: {type: "category",axisTick: {show: false,},data: arr[0].dataY,},series: arr.map(x => {return {name: x.name,type: "bar",emphasis: {focus: "series",},data: x.dataX,};}),};return option;},}, }; </script> <style lang="scss" scoped> .page {max-width: 100%;margin-top: 28px;height: 300px;padding: 10px 36px;display: flex;align-items: center;background-color: #0e141f;.title {width: 36px;line-height: 36px;height: 100%;font-weight: 600;background-color: #3c69a2;color: #fff;border-radius: 5px;-webkit-writing-mode: vertical-rl;-ms-writing-mode: bt-rl;writing-mode: vertical-rl;text-align: center;}.main-view {flex: 1;height: 100%;display: flex;align-items: center;position: relative;.left-charts,.right-charts {height: 100%;margin-left: 10px;padding: 15px;box-sizing: border-box;background-color: #141f2f;border-radius: 10px;}.left-charts {width: 55%;}.right-charts {flex: 1;}/deep/ .el-select {position: absolute;right: 2%;top: 5%;width: 100px;.el-input__inner {background-color: #16233b;border: solid 1px #29406b;border-radius: 5px;color: #fff;}}} } </style>

總結

以上是生活随笔為你收集整理的echarts无数据时显示暂无数据进行占位的全部內容，希望文章能夠幫你解決所遇到的問題。

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