当前位置: 代码迷 >> 综合 >> vue项目中eCharts报错问题:vue eCharts Cannot read property ‘init‘ of undefined
  详细解决方案

vue项目中eCharts报错问题:vue eCharts Cannot read property ‘init‘ of undefined

热度:24   发布时间:2023-11-18 14:40:00.0

1.安装 cnpm install echarts --save

2. 在main.js引入

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

3.使用

<template><div><div id="myChart" :style="{width: '300px', height: '300px'}"></div></div>
</template><script>
export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted(){this.drawLine();},methods: {drawLine(){// 基于准备好的dom,初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: { text: '在Vue中使用echarts' },tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});}},
}
</script>

4.报错

解决办法:

在main.js修改为

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

效果图

  相关解决方案