本文针对Echarts.js引入失败的问题,提供两种解决方案。重点说明从GitHub下载时,必须正确指向dist文件夹下的echarts.js文件,并将该文件夹放入工程根目录。同时提供在线引入的script标签代码,帮助开发者快速解决对象未定义错误,实现图表渲染。
Echarts引入失败原因分析
在使用Echarts进行开发时,经常遇到无法成功引入依赖包的问题。
若从GitHub下载资源,务必注意引入路径需指向dist文件夹内的echarts.js文件。
只需将该文件夹完整放入工程目录中即可,无需处理其他多余文件。

本地引入配置方法
具体代码实现非常基础。
核心代码结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="../chart/dist/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
....
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
图表初始化与在线引入备选方案
随后在示例代码中替换option配置对象,即可生成所需的各类图表。
Echarts是引入包后暴露的全局对象,此前因未正确引入JS文件导致该对象无法被识别,从而报错。
本地引入的代码结构如下所示。

如果本地资源始终无法加载,也可以采用在线CDN方式引入。
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
以上即为解决Echarts引入问题的完整方案,希望能为各位的学习提供便利,欢迎继续支持本站内容。