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

最新推荐文章于 2024-05-15 13:36:47 发布

BarryKerrigan

最新推荐文章于 2024-05-15 13:36:47 发布

阅读量2k

点赞数 4

文章标签： vue.js javascript echarts

本文链接：https://blog.csdn.net/m0_46114541/article/details/127771279

版权

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

在main方法中引入

错误

import Vue from 'vue'
import App from './App.vue'
import echarts from 'echarts'

Vue.config.productionTip = false

Vue.prototype.echarts = echarts

new Vue({
  render: h => h(App)
}).$mount('#app')

正确

import Vue from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'

Vue.config.productionTip = false

Vue.prototype.echarts = echarts
new Vue({
  render: h => h(App)
}).$mount('#app')

在组件中引入

错误

<template>
  <div>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data(){
    return{

    }
  },
  mounted(){
    this.initEchart()
  },
  methods: {
    initEchart(){
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: ''
        },
        tooltip: {},
        legend: {
          data:['']
        },
        xAxis: {
          data: ['']
        },
        yAxis: {},
        series: [{
          name: '',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      myChart.setOption(option);
    }
  }
}
</script>

正确

<template>
  <div>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data(){
    return{

    }
  },
  mounted(){
    this.initEchart()
  },
  methods: {
    initEchart(){
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: ''
        },
        tooltip: {},
        legend: {
          data:['']
        },
        xAxis: {
          data: ['']
        },
        yAxis: {},
        series: [{
          name: '',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      myChart.setOption(option);
    }
  }
}
</script>