LM19 2021-10-22 21:12 采纳率: 61.5%
浏览 42
已结题

vue使用echarts绘制图报警问题

我想实现父组件中调用子组件draw.vue来绘制图,但总是报警,无法画图。请帮助看一下错在哪里,谢谢!

代码如下:

main.js:

import * as echarts from 'echarts' //引入echarts

Vue.prototype.$echarts = echarts

在主界面中写入:

<draw></draw>

并写:

components: {
    draw
  },

最后编写子组件draw.vue:

<template>
  <div class="chart-container" ref="chart1"></div>
</template>

<script>
<template>
  <div class="chart-container" ref="chart1"></div>
</template>

<script>
let myChart = this.$echarts.init(this.$refs.chart1);

let option;

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
      ],
      type: 'scatter'
    }
  ]
};

option && myChart.setOption(option);

</script>

<style lang="scss" scoped>
 .chart-container{
   width: 100%;
   height: 100%;
 }
</style>

运行后有报警:

img

  • 写回答

1条回答 默认 最新

  • 本堃不方 2021-10-22 21:54
    关注

    试试我的

    <template>
      <div>
        <div
          class="chart-container"
          ref="chart1"
          :style="{ width: '300px', height: '300px' }"
        ></div>
      </div>
    </template>
     
    <script>
    export default {
      mounted() {
        this.drawLine();
      },
      methods: {
        drawLine() {
          let myChart = this.$echarts.init(this.$refs.chart1);
    
          let option = {
            xAxis: {},
            yAxis: {},
            series: [
              {
                symbolSize: 20,
                data: [
                  [10.0, 8.04],
                  [8.07, 6.95],
                  [13.0, 7.58],
                  [9.05, 8.81],
                  [11.0, 8.33],
                  [14.0, 7.66],
                  [13.4, 6.81],
                  [10.0, 6.33],
                  [14.0, 8.96],
                  [12.5, 6.82],
                  [9.15, 7.2],
                  [11.5, 7.2],
                  [3.03, 4.23],
                  [12.2, 7.83],
                  [2.02, 4.47],
                  [1.05, 3.33],
                  [4.05, 4.96],
                  [6.03, 7.24],
                  [12.0, 6.26],
                  [12.0, 8.84],
                  [7.08, 5.82],
                  [5.02, 5.68],
                ],
                type: "scatter",
              },
            ],
          };
    
          myChart.setOption(option);
        },
      },
    };
    </script>
     
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月31日
  • 已采纳回答 10月23日
  • 创建了问题 10月22日

悬赏问题

  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择
  • ¥15 这款软件是什么?需要能满足我的需求
  • ¥15 SpringSecurityOauth2登陆前后request不一致
  • ¥15 禅道二次开发编辑版本,上传不了发行包