echarts 本地调试没问题 打包部署就报错了？

Question

<template>
<div ref="xian" id="xian" style="width: 100%; height: 100%"></div>
</template>

<script>
import xianJSON from "../../assets/json/xian.json";
import echarts from "echarts";
export default {
name: "test",
props: {

mapPositon: {
  type: Array,
  default: [],
  detail: {},
},

},
data() {

return {
  myCharts: null,
};

},
watch: {

mapPositon() {
  this.myCharts.setOption({
    series: [
      {
        type: "map",
        map: "xa",
        zoom: 1.1,
        roam: true, // 禁止缩放
        center: [119.106431, 36.50815],
        z: -1, // 置于底层
        itemStyle: {
          normal: {
            areaColor: "#2e488f",
            borderColor: "#3dedfd",
            borderWidth: 5, //设置外层边框线粗细
          },
        },
      },
      {
        type: "effectScatter", // 特效散点图
        coordinateSystem: "geo",
        symbol: "circle",
        // symbolSize 设置标记点的大小，
        symbolSize: function (val) {
          return 10 + (1 / 100) * 10;
        },
        colorBy: "series",
        //显示name并设置样式
        label: {
          show: true,
          formatter: function (data) {
            return data.data.detail.stationName;
          },
          color: "#ffffff",
          fontSize: "10",
          position: "top",
          offset: [0, 0],
          distance:3,
          align: "center",
          backgroundColor: '#D02090',
          padding: 4
        },
        //涟漪效果设置
        rippleEffect: {
          color: "#00FF7F",
          number: 1,
          period: 2,
          scale: 2,
          brushType: "stroke",
        },
        itemStyle: {
          normal: {
            color: function(params){
              if (params.data.detail.deviceStatus == 1){
                return '#00e6ff'
              } else {
                return '#FF0000'
              }
            },
            borderColor: "#008B45",
            borderWidth: 2,
          },
        },
        data: this.mapPositon,
      },
    ],
  });
},

},
mounted() {

this.$nextTick(() => {
  setTimeout(() => {
    // let echarts = require("echarts");
    echarts.registerMap("xa", xianJSON);
    this.myCharts = echarts.init(document.getElementById('xian'));
    window.addEventListener("resize", () => {
      this.myCharts.resize();
    });
    this.myCharts.setOption({
      geo: {
        map: "xa",
        zoom: 1.1,
        roam: true, // 禁止缩放
        center: [119.106431, 36.50815],
        label: {
          show: true,
          color: "rgba(255,255,255,0.2)",
        },
        itemStyle: {
          normal: {
            areaColor: "#06809f",
            borderColor: "rgba(0,116,255,0.2)",
            borderWidth: 2,
            borderType: "dashed",
          },
          emphasis: {
            areaColor: "#4f6ee9",
            color: "rgba(255,255,255,0.8)",
          },
        },
      },
      series: [
        //绘制一个新地图
        {
          type: "map",
          map: "xa",
          zoom: 1.1,
          roam: true, // 禁止缩放
          center: [119.106431, 36.50815],
          z: -1, // 置于底层
          itemStyle: {
            normal: {
              areaColor: "#2e488f",
              borderColor: "#3dedfd",
              borderWidth: 5, //设置外层边框线粗细
            },
          },
        },
        {
          type: "effectScatter", // 特效散点图
          coordinateSystem: "geo",
          symbol: "circle",
          // symbolSize 设置标记点的大小，
          symbolSize: function (val) {
            return 15 + (val[2] / 100) * 10;
          },
          colorBy: "series",
          //显示name并设置样式
          label: {
            show: false,
            formatter: function (data) {
              return data.value[2];
            },
            color: "#080b1a",
            fontSize: "12",
            offset: [0, 0],
            align: "center",
          },
          //涟漪效果设置
          rippleEffect: {
            color: "#3dedfd",
            number: 3,
            period: 4,
            scale: 2,
            brushType: "stroke",
          },
          itemStyle: {
            normal: {
              color: "#00e6ff",
              borderColor: "#32479d",
              borderWidth: 2,
            },
          },
          data: [],
        },
      ],
    });
    this.myCharts.on("click", (params) => {
      // console.log("==========", params);
      if (params.data) {
        this.$emit("detail", { params });
      }
      // this.$emit("onChange");
    });
    this.myCharts.on("georoam", (params) => {
      var option = this.myCharts.getOption(); //获得option对象
      if (params.zoom != null && params.zoom != undefined) {
        //捕捉到缩放时
        option.series[0].zoom = option.geo[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
        option.series[0].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
      } else {
        //捕捉到拖曳时
        option.series[0].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
      }
      this.myCharts.setOption(option); //设置option
    });
  }, 300);
});

},

methods: {

detail() {},

},
};
</script>

<style scoped>
</style>

本地调试没问题
部署上线后 报如下错误

Answer 1

应该是这里报的错, 监听变化执行时, 此时的myCharts是null, 需要在前面加一行this.myCharts = echarts.init(document.getElementById('xian'));