Vue.js 安装的挂钩中出现错误：“0”；TypeError:无法读取属性'；类型'；“无效”的定义；

我正在使用

echarts

绘制

热图

但是给我错误

挂载的钩子中出错：“TypeError:无法读取null的属性“type”

我在这里使用json数据：

刚刚从上面的链接中获取了1个数据

<template>
  <div
    :id="id"
    :class="className"
    :style="{height:height,width:width}"
  />
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'newCustomerForecastChart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      dataArr: [
        {
            "coord":
            [
                120.14322240845,
                30.236064370321
            ],
            "elevation": 21
        },
        {
            "coord":
            [
                120.14280555506,
                30.23633761213
            ],
            "elevation": 5
        }
      ]
    }
  },
  mounted() {   
     this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var points = [
          {
            "coord":
            [
                120.14322240845,
                30.236064370321
            ],
            "elevation": 21
        },
        {
            "coord":
            [
                120.14280555506,
                30.23633761213
            ],
            "elevation": 5
        }
      ]
      this.chart = echarts.init(document.getElementById(this.id))
      var colors = ['#5793f3', '#d14a61', '#675bba'];

      this.chart.setOption({
        animation: false,
        bmap: {
            center: [120.13066322374, 30.240018034923],
            zoom: 14,
            roam: true
        },
        visualMap: {
            show: false,
            top: 'top',
            min: 0,
            max: 5,
            seriesIndex: 0,
            calculable: true,
            inRange: {
                color: ['blue', 'blue', 'green', 'yellow', 'red']
            }
        },
        series: [{
            type: 'heatmap',
            coordinateSystem: 'bmap',
            data: points,
            pointSize: 5,
            blurSize: 6
        }]
    });

    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addControl(new BMap.MapTypeControl());
    }
  }
}
</script>

从“echarts”导入echarts
从“../mixins/resize”导入调整大小
导出默认值{
混合：[调整大小]，
道具：{
类名：{
类型：字符串，
默认值：“图表”
},
身份证：{
类型：字符串，
默认值：“newCustomerForecastChart”
},
宽度：{
类型：字符串，
默认值：“200px”
},
高度：{
类型：字符串，
默认值：“200px”
}
},
数据（）{
返回{
图表：空，
数据阵列：[
{
“合作社”：
[
120.14322240845,
30.236064370321
],
“标高”：21
},
{
“合作社”：
[
120.14280555506,
30.23633761213
],
“标高”：5
}
]
}
},
挂载（）{
this.initChart（）
},
在…之前{
如果（！this.chart）{
返回
}
this.chart.dispose（）
this.chart=null
},
方法：{
initChart（）{
变量点=[
{
“合作社”：
[
120.14322240845,
30.236064370321
],
“标高”：21
},
{
“合作社”：
[
120.14280555506,
30.23633761213
],
“标高”：5
}
]
this.chart=echart.init（document.getElementById（this.id））
变量颜色=['#5793f3'、'#d14a61'、'#675bba']；
this.chart.setOption({
动画：错，
bmap：{
中间：[120.13066322374,30.240018034923]，
缩放：14，
罗姆：没错
},
可视化地图：{
秀:假,，
顶部：“顶部”，
分:0,，
最高：5，
序列索引：0，
可计算的：是的，
范围：{
颜色：[“蓝色”、“蓝色”、“绿色”、“黄色”、“红色”]
}
},
系列：[{
类型：'热图'，
协调系统：“bmap”，
数据：分，
点数：5，
尺寸：6
}]
});
var bmap=myChart.getModel（）.getComponent（'bmap'）.getBMap（）；
bmap.addControl（新的bmap.MapTypeControl（））；
}
}
}

---

实际问题是什么？

请分享您的代码，而不是软件库中的示例。您可以编辑它吗？我可以，但我没有您的代码。我已经添加了完整的代码。在文档中，数据数组由数组组成。你能试试数据：[点数]吗？否则的话，错误是一般性的，在没有可复制的例子的情况下，找出发生了什么

<template>
  <div
    :id="id"
    :class="className"
    :style="{height:height,width:width}"
  />
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'newCustomerForecastChart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      dataArr: [
        {
            "coord":
            [
                120.14322240845,
                30.236064370321
            ],
            "elevation": 21
        },
        {
            "coord":
            [
                120.14280555506,
                30.23633761213
            ],
            "elevation": 5
        }
      ]
    }
  },
  mounted() {   
     this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var points = [
          {
            "coord":
            [
                120.14322240845,
                30.236064370321
            ],
            "elevation": 21
        },
        {
            "coord":
            [
                120.14280555506,
                30.23633761213
            ],
            "elevation": 5
        }
      ]
      this.chart = echarts.init(document.getElementById(this.id))
      var colors = ['#5793f3', '#d14a61', '#675bba'];

      this.chart.setOption({
        animation: false,
        bmap: {
            center: [120.13066322374, 30.240018034923],
            zoom: 14,
            roam: true
        },
        visualMap: {
            show: false,
            top: 'top',
            min: 0,
            max: 5,
            seriesIndex: 0,
            calculable: true,
            inRange: {
                color: ['blue', 'blue', 'green', 'yellow', 'red']
            }
        },
        series: [{
            type: 'heatmap',
            coordinateSystem: 'bmap',
            data: points,
            pointSize: 5,
            blurSize: 6
        }]
    });

    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addControl(new BMap.MapTypeControl());
    }
  }
}
</script>