vue中使用echarts及报错（Cannot read property ‘init‘ of undefined）处理

最新推荐文章于 2024-08-12 00:48:50 发布

shinjie1210

最新推荐文章于 2024-08-12 00:48:50 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript echarts elementui

本文链接：https://blog.csdn.net/shinjie1210/article/details/119325782

版权

本文档介绍了在Vue项目中使用ECharts时遇到的'Cannot read property 'init' of undefined'错误的解决方法。首先，通过npm安装echarts，然后在main.js中正确引入。当出现上述报错，通常是由于直接在main.js中不恰当的引入代码导致，修正引入方式即可解决问题。

摘要由CSDN通过智能技术生成

安装步骤

项目控制台输入npm install echarts --save

找到main.js 引入

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

然后就可以按照官网文档里的5分钟上手内容使用了

这里给个简单例子官网上扒的示例图表

<template>
	<div class="home">	
	  <div id="echarts" style="width:600px;height:400px";>
	  </div>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {

			};
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('echarts'))
				// 绘制图表
				myChart.setOption({
					title: {
						text: '表头'
					},
					// darkMode:'true',
					toolti