vue3.0发布问题。导致页面渲染不出来

Question

问题遇到的现象和发生背景

在本地调取接口，页面显示没有任何问题，一旦发布，页面就奔溃，提示：Cannot read properties of null (reading 'type')

问题相关代码，请勿粘贴截图

const getOption = () => {
  state.title = "";
  state.data = [];
  state.legendData = [];
  state.seriesData = [];
  state.SourceData = [];
  state.data = props.value;
  console.log("state.data", state.data);
  if (state.data.length > 0) {
    state.title = state.data[0].Module;
    state.data.map((item, index) => {
      state.seriesData.push({
        name: item.Title,
        type: "line",
        symbol: "circle",
        symbolSize: 8
      });
      state.legendData.push(item.Title);
      item.DataList.map((item1, index1) => {
        if (index == 0) {
          state.SourceData.push([item1.TimePoint]);
        }
        state.SourceData[index1].push(item1.Value);
      });
    });
  }

  let option = {
    title: {
      text: state.title,
      left: "2%",
      top: "5%",
      textStyle: {
        color: "#33DCF9"
      }
    },
    legend: {
      data: state.legendData,
      width: "80%",
      right: "2%",
      top: "15%",
      textStyle: {
        color: "#33DCF9",
        fontSize: 14
      }
    },
    grid: {
      top: "40%",
      bottom: "2%",
      left: "10%",
      right: "5%"
    },
    tooltip: {
      show: true,
      trigger: "axis"
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#3486da"
        }
      },
      axisLabel: {
        show: false,
        interval: 0
        //   color: "#A8D9EB",
        //   fontSize: 16,
        //   margin: 16
      },
      axisTick: {
        show: false
      }
      // data: [
      //   "Housing Left Molding",
      //   "Housing Right Molding",
      //   "Cap Left Molding",
      //   "Cap Right Molding"
      // ]
    },
    yAxis: {
      name: "OutPut",
      type: "value",
      scale: true,
      interval: 400,
      nameTextStyle: {
        color: "#A8D9EB",
        padding: [0, 50, 0, 0]
      },
      show: true,
      axisLabel: {
        color: "#A8D9EB",
        fontSize: 14
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#3486da"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#162b5f"
        }
      }
    },
    dataset: {
      source: state.SourceData
    },
    series: state.seriesData,
    color: [
      "red",
      "#A462FF",
      "#00F6FF",
      "#23CD1A",
      "#FAA319",
      "#FFA5B1",
      "#fff"
    ]
  };
  state.dom = markRaw(echarts.init(state.dom));
  state.dom.setOption(option);
  on(window, "resize", resize);
};
onMounted(() => {
  nextTick(() => {
    getOption();
  });
}); onUpdated(() => {
  nextTick(() => {
    getOption();
  });
});

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

建议附上请求层代码