Vue中引入echarts的正确引法

墨蓝 2022-10-08 02:30 236阅读 0赞

*  在做Vue的电商管理系统时遇到了一个一直给我提示init未定义的警告  
    \[Vue warn\]: Error in mounted hook (Promise/async): “TypeError: Cannot read property ‘init’ of undefined”  
    看了其他博客的解决办法，是要利用Vue中的ref和$refs 来代替document.getElementById（）获取该图形容器对象。  
    但然后我发现是引用的语句问题，只要将**import echarts from 'echarts’修改成import \* as echarts from 'echarts’就不报错了**  
    注意：**import \* as xxx from ‘xxx’** 会将 “xxx” 中所有 export 导出的内容组合成一个对象返回(或import \* as obj from ‘xx’ 这种写法是把所有的输出包裹到obj对象里);

<template>
      <div>
        
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据统计</el-breadcrumb-item>
          <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card>
          
          <div id="main" style="width: 750px; height: 400px"></div>
        </el-card>
      </div>
    </template>
    
    <script>
    // 1、导入echarts
    import echarts from 'echarts'
    import _ from 'lodash'
    export default { 
      data() { 
        return { 
          // 需要合并的数据
          options: { 
            title: { 
              text: '用户来源',
            },
            tooltip: { 
              trigger: 'axis',
              axisPointer: { 
                type: 'cross',
                label: { 
                  backgroundColor: '#E9EEF3',
                },
              },
            },
            grid: { 
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: [
              { 
                boundaryGap: false,
              },
            ],
            yAxis: [
              { 
                type: 'value',
              },
            ],
          },
        }
      },
    
      created() { },
      // 此时页面上的元素已经被渲染完毕了
      async mounted() { 
        // 3、基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'))
    
        const {  data: res } = await this.$http.get('reports/type/1')
        if (res.meta.status !== 200)
          return this.$message.error('获取时间统计的折线图失败！')
        // 4、准备数据和配置项
        const result = _.merge(res.data, this.options)
    
        // 5、使用刚指定的配置项和数据显示图表，展示数据
        myChart.setOption(result)
      },
      methods: { },
    }
    </script>
    <style lang='less' scoped>
    </style>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1NjM3Mg_size_16_color_FFFFFF_t_70]: /images/20221005/2aebd513d81c48b8857623b3ef0c4901.png