echarts导入报错

最新推荐文章于 2022-08-08 09:00:36 发布

YY_pdd

最新推荐文章于 2022-08-08 09:00:36 发布

阅读量1.2k

点赞数

分类专栏：前端学习 test 文章标签： js 前端

本文链接：https://blog.csdn.net/qq_41275983/article/details/115535720

版权

学习同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

test

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

一、概述

最简单的js导入一般就是用标签导入。如下：

<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
	<!-- <script type="text/javascript" src="https://echarts.baidu.com/dist/echarts.min.js"></script> -->
    <!-- 引入 echarts.js -->
	<!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> -->
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
//这里可能报错：
    //<script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
	<script type="text/javascript">
		// import * as echarts from 'echarts';
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这是官方的例子，不过它使用的是如下导入：

<script src="echarts.min.js"></script>

这个导入本身没有问题，但对于新手来说，没有按照echarts文件的话，上面哪个简化的src路径会找不到（我以为js脚本会自动在后面增加echarts官方服务器的路径，但实际并没有）。这也就是我这次报错的原因。现象是UncaughtReferenceError: echarts is not defined，导包错误当然找不到这个echarts变量。

实际上在官网上面对这个问题有说明：

引入 ECharts
通过标签方式直接引入构建好的 echarts 文件

如果导入简单的echarts.min.js名称，需要已经构建echarts文件。

二、解决

如果不想构建echarts文件。

最简单的方法是使用src属性导入完全的js包网址。

但这种方式也有一个问题：服务器网址发生了变动。实际上这个变动经常发生（虽然可能一年也没几次，但如果碰到了还是烦的很），所以如果不想下载echarts文件，我们只能在官网找到权威的js服务器网址（最新版的）。

目前来说，概述里面的html代码保存为文件即可直接在浏览器显示。但如果网址发生变动，还是得上官网找最新的网址。

YY_pdd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
echarts导入报错

一、概述最简单的js导入一般就是用标签导入。如下：<html><head> <meta charset="utf-8"> <title>ECharts</title>  <!-
复制链接

扫一扫