首页 前端知识 Uncaught ReferenceError: Echarts is not defined at eval (index.vue?335a:27:1)解决方法

Uncaught ReferenceError: Echarts is not defined at eval (index.vue?335a:27:1)解决方法

2024-05-25 09:05:40 前端知识 前端哥 972 827 我要收藏

在vue中引入echarts报错,显示Echarts未定义

原代码如下:

<template>
    <div class="home">
        <commonView title="累计订单量" nums="2,157,450">
            <template>
                <div id="box">
                    
                </div>
            </template>
            <template #sum>
                <div>
                    sum
                </div>
            </template>
        </commonView>
    </div>
</template>
<script>
import commonView from '../commonView/index.vue';
    export default{
        name: 'index',
        components:{
            commonView
        }
    }
import * as echarts from "echarts";
    const chartDom = document.getElementById("box")
    const charts = Echarts.init(chartDom,"",{renderer:"svg"})
    charts.setOption({
        xAxis:{
            type:'category',
            boundaryGap:false,
            data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        },
        yAxis:{
            type:'value'
        },
        series:[{
            type:'line',
            data:[520, 832, 601, 1034, 590, 930, 620]
        }]
    })
</script>
<style>
</style>

不需要再次引入echarts,同时echarts已经挂载,直接使用this.$echarts即可 

echarts的配置项等也需要在页面加载时渲染,所以写在mounted()函数中

修改后代码如下:

 

<template>
    <div class="home">
        <commonView title="累计订单量" nums="2,157,450">
            <template>
                <div id="box" style="width:100%;height: 100%;">
                    
                </div>
            </template>
            <template #sum>
                <div>
                    sum
                </div>
            </template>
        </commonView>
    </div>
</template>
<script>
import commonView from '../commonView/index.vue';
    export default{
        name: 'index',
        components:{
            commonView
        },
        mounted(){
            const chartDom = document.getElementById("box")
            const charts = this.$echarts.init(chartDom)
            charts.setOption({
                xAxis:{
                    type:'category',
                    boundaryGap:false,
                    data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
                },
                yAxis:{
                    type:'value'
                },
                series:[{
                    type:'line',
                    data:[520, 832, 601, 1034, 590, 930, 620]
                }]
            })
        }
    }
    
</script>
<style>
</style>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9402.html
标签
评论
发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么?如何使用?

2024-03-12 01:03:24

js延迟加载的六种方式

2024-05-30 10:05:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!