引入echarts报错Cannot read properties of undefined (reading ‘init‘)

在引入echarts需要使用关键字as，否则引入无效

在main方法中引入

错误

1.  
   import Vue from 'vue'
2.  
   import App from './App.vue'
3.  
   import echarts from 'echarts'
4.  
    
5.  
   Vue.config.productionTip = false
6.  
    
7.  
   Vue.prototype.echarts = echarts
8.  
    
9.  
   new Vue({
10.  
    render: h => h(App)
11.  
    }).$mount('#app')

正确

1.  
   import Vue from 'vue'
2.  
   import App from './App.vue'
3.  
   import * as echarts from 'echarts'
4.  
    
5.  
   Vue.config.productionTip = false
6.  
    
7.  
   Vue.prototype.echarts = echarts
8.  
   new Vue({
9.  
   render: h => h(App)
10.  
    }).$mount('#app')

在组件中引入

错误

1.  
   <template>
2.  
   <div>
3.  
   <div id="main" style="width: 600px;height:400px;"></div>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   import echarts from 'echarts'
8.  
   export default {
9.  
   data(){
10.  
    return{
11.  
     
12.  
    }
13.  
    },
14.  
    mounted(){
15.  
    this.initEchart()
16.  
    },
17.  
    methods: {
18.  
    initEchart(){
19.  
    let myChart = echarts.init(document.getElementById('main'));
20.  
    let option = {
21.  
    title: {
22.  
    text: ''
23.  
    },
24.  
    tooltip: {},
25.  
    legend: {
26.  
    data:['']
27.  
    },
28.  
    xAxis: {
29.  
    data: ['']
30.  
    },
31.  
    yAxis: {},
32.  
    series: [{
33.  
    name: '',
34.  
    type: 'bar',
35.  
    data: [5, 20, 36, 10, 10, 20]
36.  
    }]
37.  
    }
38.  
    myChart.setOption(option);
39.  
    }
40.  
    }
41.  
    }
42.  
    </script>

正确

1.  
   <template>
2.  
   <div>
3.  
   <div id="main" style="width: 600px;height:400px;"></div>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   import * as echarts from 'echarts'
8.  
   export default {
9.  
   data(){
10.  
    return{
11.  
     
12.  
    }
13.  
    },
14.  
    mounted(){
15.  
    this.initEchart()
16.  
    },
17.  
    methods: {
18.  
    initEchart(){
19.  
    let myChart = echarts.init(document.getElementById('main'));
20.  
    let option = {
21.  
    title: {
22.  
    text: ''
23.  
    },
24.  
    tooltip: {},
25.  
    legend: {
26.  
    data:['']
27.  
    },
28.  
    xAxis: {
29.  
    data: ['']
30.  
    },
31.  
    yAxis: {},
32.  
    series: [{
33.  
    name: '',
34.  
    type: 'bar',
35.  
    data: [5, 20, 36, 10, 10, 20]
36.  
    }]
37.  
    }
38.  
    myChart.setOption(option);
39.  
    }
40.  
    }
41.  
    }
42.  
    </script>

这篇好文章是转载于：学新通技术网