在vue里使用echarts时，数据没有渲染上去

Question

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

使用echarts时，数据没有渲染到图表里去，第一次使用echarts所以找不到问题在哪

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

<template>
  <div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="时钟信号监测" name="1" class="top-zd">
          <template slot="title">
            <span class="top-text">参考源状态</span>
            <i class="el-icon-close icon-dis" @click="fun(1)"></i>
          </template>
          <div style="margin-left:20px;margin-bottom:5px">
                  <canvas id="GNSS1SatellitePosition" width="480" height="480"></canvas>
          </div>
        </el-collapse-item>
        
      </el-collapse>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
import getlink from "@/api/getapi.js";
export default {
  name: "DynamicLineChart",
  data() {
    return {
      activeNames: ['1'],
      GNSS1Data:[],
time:'',
    }
  },
  mounted() {
this.time=setInterval(this.drawGNSS1Data,1000)
    this.drawGNSS1Data()
  
  },
  methods: {
    drawGNSS1BaseSatellite() {
    var cxt = this.GetId('GNSS1SatellitePosition').getContext("2d");
    var radius = 180; //半径
    cxt.translate(80, 80); //坐标原点移动，留出边界值，让可能出现在最外层的信息能显示
    //绘制背景
    cxt.beginPath();
    cxt.fillStyle = 'rgb(232,232,232)';
    cxt.arc(radius, radius, radius, 0, Math.PI * 2, false);
    cxt.fill();

    cxt.beginPath();
    cxt.fillStyle = 'white';
    cxt.arc(radius, radius, radius * 2 / 3, 0, Math.PI * 2, false);
    cxt.fill();

    cxt.beginPath();
    cxt.fillStyle = 'rgb(232,232,232)';
    cxt.arc(radius, radius, radius / 3, 0, Math.PI * 2, false);
    cxt.fill();
    cxt.save(); //保存状态
    //通过旋转的方式画圆中的分割线
    cxt.beginPath();
    cxt.strokeStyle = 'rgb(220,220,220)';
    cxt.translate(radius, radius);
    for (var i = 0; i < 12; i++) {
        cxt.rotate(Math.PI / 180 * 30);
        cxt.moveTo(0, 0);
        cxt.lineTo(0, radius);
    }
    cxt.stroke();
    cxt.restore();
    cxt.font = "20px Heiti SC";
    cxt.fillStyle = "rgb(69,69,69)";
    cxt.fillText("270°", 130 - radius, radius + 5);
    cxt.fillText("0°", radius - 5, 170 - radius);
    cxt.fillText("90°", radius + 190, radius + 5);
    cxt.fillText("180°", radius - 15, radius + 205);
},
    drawGNSS1SatellitePosition(drawData, GNSS1Flg) {
    var color = {
        "1": "rgb(26,187,156)", //#66CDAA 标记GPS颜色
        "2": "rgb(52,152,219)", //#4F94CD 标记BDS颜色
    };
    var cxt = this.GetId('GNSS1SatellitePosition').getContext("2d");
    var radius = 180; //半径
    var cosLen,
    x,
    y;

    this.GetId('GNSS1SatellitePosition').height = this.GetId('GNSS1SatellitePosition').height;
    this.drawGNSS1BaseSatellite();

    cxt.translate(radius, radius);
    cxt.save();

    cxt.font = "bold 12px Arial";
    cxt.textAlign = "center";
    cxt.textBaseline = "middle";
  // console.log(drawData.length)
    for (var i = 0 ; i < drawData.length; i++) {
        cxt.beginPath();
        if (drawData[i].type == "GPS") {
            cxt.fillStyle = color[1];
        } else if (drawData[i].type == "BDS") {
            cxt.fillStyle = color[2];
        } else {
       console.log(drawData[i])
            break;
        }
        //cxt.fillStyle = color[drawData[i].type];

        //关键代码。求圆心坐标。coslen是求出来的该点到圆心的距离。
     cosLen = Math.cos(drawData[i].elevation * Math.PI / 180) * radius;
    console.log(cosLen)
        y = Math.cos(drawData[i].azimuth * Math.PI / 180) * cosLen;
        x = Math.sin(drawData[i].azimuth * Math.PI / 180) * cosLen;
        if (GNSS1Flg == 1) {
            if ((drawData[i].elevation == "0") && (drawData[i].azimuth == "0")) {
        console.log(13)
      }
            else {
                cxt.arc(x, -y, 13, 0, Math.PI * 2, false); //在坐标点绘制圆
                cxt.fill();
                cxt.beginPath();
                cxt.fillStyle = 'white';
                cxt.fillText(drawData[i].num, x, -y); //在坐标点写文字卫星号
            }
        }
    
    }
    cxt.restore();
}  ,
  GetId(id) {
    return document.getElementById(id);
},
drawGNSS1Data() {
    getlink("api/cgi-bin/GnssState.cgi?" + "drawGNSS1Data").then((ok) => {
      this.callbackFunction_drawGNSS1Data(ok.data)
      // console.log(ok)
    })
},
callbackFunction_drawGNSS1Data(xhr_drawGNSS1Data) {

            var returnValue = xhr_drawGNSS1Data;
            // console.log(returnValue)
            if (returnValue != null && returnValue.length > 0) {
                let response1 = xhr_drawGNSS1Data.split("|");
        console.log(response1)
        this.GNSS1Data=response1
        console.log(response1[response1.length-1])
                    this.drawGNSS1SatellitePosition(this.GNSS1Data, response1[response1.length - 1])
                    // console.log(this.GNSS1Data)
                    // console.log(response1[response1.length - 1])
            } 
         
    },
    
  }
};
</script>

<style scoped>

</style>

运行结果及报错内容

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

我想要达到的结果

这是最终要的效果

Answer 1

你这是重写echarts源码吗,echarts官网里面应该有类似的图表