echarts无数据时显示暂无数据进行占位

 效果：

 思路：

提前在 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>