vue引入echarts控制檯報錯echarts is not defined的問題解決

在看 Vue 學習視頻的時候，裏面有一節視頻是引入 echarts 圖表作數據統計的內容。
首先，是要安裝 echarts，在項目的運行依賴中選擇 echarts 並安裝，放上安裝完成的截圖：

按照官方文檔實例，在 Dom 中放入指定代碼：

<template>
    <!-- 第二步 爲 echarts 準備 Dom 區域 -->
    <div id="main" style="width: 600px;height:400px;"></div>
</template>

接下來在 script 中導入 echarts，並在 mounted 頁面加載完畢後初始化 echarts

// 第一步 導入圖表組件 echarts
import echarts from 'echarts'
export default {
    mounted() {
        // 第三步 初始化 echarts
        var myChart = echarts.init(document.getElementById('main'))
        // 第四步 準備數據和配置項
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data: ['銷量']
            },
            xAxis: {
                data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }
        // 第五步 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option)
    }
}

安裝官方文檔導入完畢後，可是 echarts 圖表不顯示，並且控制檯顯示報錯：

有問題找百度，面向百度編程，看到各類各樣的解決方法，試一試吧，選擇第一種方式,使用 as 居然能夠了

import * as echarts from 'echarts'