在Vue中使用echarts，并解决“TypeError: Cannot read property 'init' of undefined”报错

1.安装echarts依赖

npm install echarts --save

2.main.js 引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.页面文件中使用  如：

<template>  
    <div style="font-size: 20px">    
        主体信用信息统计    
        <div class="shili" ref="chart"></div>  
    </div>
</template>
<script>
export default {  
    data() {    
        return {};  
    },  
    components: {},  
    computed: {},  
    mounted() {      
        this.initCharts();  
    },  
    methods: {    
        initCharts() {        
            console.log(this.$refs.chart); 
            // 绘制图表        
            // return      
            let myChart = this.$echarts.init(this.$refs.chart);            
            myChart.setOption({        
                title: { text: "在Vue中使用echarts" },        
                tooltip: {},        
                xAxis: {          
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],        
                },        
                yAxis: {},        
                series: [          
                    {            
                        name: "销量",            
                        type: "bar",            
                        data: [5, 20, 36, 10, 10, 20],          
                    },        
                ],      
            });    
        },  
    },
};
</script>
<style lang="scss" scoped>
    .shili {  
        width: 500px;  
        height: 500px;  
        background: red;
    }
</style>

运行时可能会报 “TypeError: Cannot read property 'init' of undefined”

解决办法：

main.js中的import echarts from 'echarts'改为import * as echarts from 'echarts' 就好了

谢谢；