vue 集成 echart

<template>
  <div id="container" ref="container" style="width: 100%; height: 820px; border-color: rgb(24, 20, 50) ;background-color: rgb(16, 12, 42);"></div>
</template>

<script>
  export default {
    name: 'activeMonitorMap',
    data() {

    },
    mounted() {
      this.getEcharts()
    },
    methods: {
      getEcharts() {
        let myChart_access = this.$echarts.init(this.$refs.container)
        let symbolSize = 5
       let data = [
          [531074.073, 3485785.024, 9.971],
          [531074.277, 3485784.589, 9.829],
          [531074.481, 3485784.153, 9.688],
          [531074.684, 3485783.716, 9.549],
          [531074.885, 3485783.282, 9.407],
          [531075.088, 3485782.848, 9.262],
          [531075.293, 3485782.419, 9.115],
          [531075.503, 3485781.988, 8.969],
           [531075.718, 3485781.559, 8.826],
          [531075.937, 3485781.133, 8.687],
          [531076.16, 3485780.707, -8.551]
        ]
        myChart_access.setOption({
          trigger: 'axis',
          visualMap: [
            {
              top: 5,
              calculable: true,
              dimension: 3,
              max: 100/ 2,
              inRange: {
                    color: [
                  '#1710c0',
                  '#0b9df0',
                  '#00fea8',
                  '#00ff0d',
                  '#f5f811',
                  '#f09a09',
                  '#fe0300'
                ]
              },

                textStyle: {
                color: '#fff'
              }
            },
            {
              bottom: 10,
              calculable: true,
              dimension: 4,
              max: 100 / 2,
              inRange: {
                symbolSize: [10, 30]
              },
              textStyle: {
                color: '#fff'
              }
            }
          ],

   axisPointer: {
            type: 'cross'
          },
          grid3D: {
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
              axisPointer: {
              lineStyle: {
                color: '#19FFF2'
              }
            }
          },
          xAxis3D: {
            type: 'value',
            scale: true
          },
          yAxis3D: {
            type: 'value',
            scale: true
          },
          zAxis3D: {
            type: 'value',
            scale: true
          },
          dataset: {
            source: data
          },

   series: [
            {
              type: 'scatter3D',
              symbolSize: symbolSize,
              encode: {
                x: 'x',
                y: 'y',
                z: '高度',
                tooltip: [0, 1, 2, 3, 4]
              },

itemStyle: {
                // borderWidth: 1,
                // borderColor: ""
                color: '#19FFF2'
              }
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>