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

在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>