echarts报错Uncaught SyntaxError: Unexpected token ‘＜‘

最新推荐文章于 2024-07-13 22:59:42 发布

逍遥在南方

最新推荐文章于 2024-07-13 22:59:42 发布

阅读量6.4k

点赞数 4

分类专栏： SpringBoot 前端文章标签： html 前端 echarts

本文链接：https://blog.csdn.net/Ruaki/article/details/113843560

版权

在尝试使用echarts时遇到Uncaught SyntaxError：Unexpected token '<'的问题。通过按照官方教程操作并参考其他博主的建议，发现需要完整下载echarts的js文件，而不仅仅是单一文件。通过在线定制并下载所有组件，问题得到解决。

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

问题重现

最近需要研究echarts做图表，打算在html中先引用echarts试试。

于是百度到echarts官网的教程：5 分钟上手 ECharts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的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>

从教程中看到只在html中引用了echarts.min.js，打算将echarts.min.js下载到本地，然后我在
https://echarts.apache.org/zh/download.html
点击了最新的5.0.2 Dist，跳转到
https://github.com/apache/echarts/tree/5.0.2/dist
下载了echarts.min.js，放到了springboot项目下的static/js/echarts/，如下图。
在这里插入图片描述
启动项目浏览器中进入页面，控制台报错

Uncaught SyntaxError: Unexpected token '<'

在这里插入图片描述
什么鬼，我明明按教程做的，页面代码也是复制的，最多就是js引用路径不同，直接在浏览器输入js的路径也正常。

查了百度，应该是缺少东西，后面看到一位博主
EChart 学习笔记一：EChart在html中的使用方式。
文中提到在线定制，我才知道有这样的东西…
在这里插入图片描述
我把最后的代码压缩取消勾选了，上面的所有组件全都选了，打包下载的提示是

Loaded module: "/echarts@5.0.2/lib/echarts.js"
Loaded module: "/echarts@5.0.2/lib/export/core.js"
Loaded module: "/echarts@5.0.2/lib/core/echarts.js"
Loaded module: "/tslib@2.0.3/tslib.es6.js"
Loaded module: "/zrender@5.0.4/lib/zrender.js"
Loaded module: "/zrender@5.0.4/lib/core/env.js"
Loaded module: "/zrender@5.0.4/lib/core/util.js"
Loaded module: "/zrender@5.0.4/lib/Handler.js"
Loaded module: "/zrender@5.0.4/lib/core/vector.js"
Loaded module: "/zrender@5.0.4/lib/mixin/Draggable.js"
Loaded module: "/zrender@5.0.4/lib/core/Eventful.js"
Loaded module: "/zrender@5.0.4/lib/core/event.js"
Loaded module: "/zrender@5.0.4/lib/core/dom.js"
Loaded module: "/zrender@5.0.4/lib/core/fourPointsTransform.js"
Loaded module: "/zrender@5.0.4/lib/core/GestureMgr.js"
Loaded module: "/zrender@5.0.4/lib/Storage.js"
Loaded module: "/zrender@5.0.4/lib/Element.js"
Loaded module: "/zrender@5.0.4/lib/core/Transformable.js"
Loaded module: "/zrender@5.0.4/lib/core/matrix.js"
Loaded module: "/zrender@5.0.4/lib/animation/Animator.js"
Loaded module: "/zrender@5.0.4/lib/animation/Clip.js"
Loaded module: "/zrender@5.0.4/lib/animation/easing.js"
Loaded module: "/zrender@5.0.4/lib/tool/color.js"
Loaded module: "/zrender@5.0.4/lib/core/LRU.js"
Loaded module: "/zrender@5.0.4/lib/core/BoundingRect.js"
Loaded module: "/zrender@5.0.4/lib/core/Point.js"
Loaded module: "/zrender@5.0.4/lib/contain/text.js"
Loaded module: "/zrender@5.0.4/lib/config.js"
Loaded module: "/zrender@5.0.4/lib/core/timsort.js"
Loaded module: "/zrender@5.0.4/lib/animation/Animation.js"
Loaded module: "/zrender@5.0.4/lib/animation/requestAnimationFrame.js"
Loaded module: "/zrender@5.0.4/lib/dom/HandlerProxy.js"
Loaded module: "/zrender@5.0.4/lib/graphic/Group.js"
Loaded module: "/echarts@5.0.2/lib/model/Global.js"
Loaded module: "/echarts@5.0.2/lib/util/model.js"
Loaded module: "/echarts@5.0.2/lib/util/number.js"
Loaded module: "/echarts@5.0.2/lib/util/log.js"
Loaded module: "/echarts@5.0.2/lib/model/Model.js"
Loaded module: "/echarts@5.0.2/lib/util/clazz.js"
Loaded module: "/echarts@5.0.2/lib/model/mixin/areaStyle.js"
Loaded module: "/echarts@5.0.2/lib/model/mixin/makeStyleMapper.js"
Loaded module: "/echarts@5.0.2/lib/model/mixin/textStyle.js"
Loaded module: "/echarts@5.0.2/lib/label/labelStyle.js"
Loaded module: "/zrender@5.0.4/lib/graphic/Text.js"
Loaded module: "/zrender@5.0.4/lib/graphic/helper/parseText.js"
Loaded module: "/zrender@5.0.4/lib/graphic/helper/image.js"
Loaded module: "/zrender@5.0.4/lib/graphic/TSpan.js"
Loaded module: "/zrender@5.0.4/lib/graphic/Displayable.js"
Loaded module: "/zrender@5.0.4/lib/graphic/Path.js"
Loaded module: "/zrender@5.0.4/lib/core/PathProxy.js"
Loaded module: "/zrender@5.0.4/lib/core/bbox.js"
Loaded module: "/zrender@5.0.4/lib/core/curve.js"
Loaded module: "/zrender@5.0.4/lib/contain/path.js"
Loaded module: "/zrender@5.0.4/lib/contain/line.js"
Loaded module: "/zrender@5.0.4/lib/contain/cubic.js"
Loaded module: "/zrender@5.0.4/lib/contain/quadratic.js"
Loaded module: "/zrender@5.0.4/lib/contain/arc.js"
Loaded module: "/zrender@5.0.4/lib/contain/util.js"
Loaded module: "/zrender@5.0.4/lib/contain/windingLine.js"
Loaded module: "/zrender@5.0.4/lib/graphic/Image.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Rect.js"
Loaded module: "/zrender@5.0.4/lib/graphic/helper/roundRect.js"
Loaded module: "/zrender@5.0.4/lib/graphic/helper/subPixelOptimize.js"
Loaded module: "/echarts@5.0.2/lib/util/states.js"
Loaded module: "/echarts@5.0.2/lib/util/innerStore.js"
Loaded module: "/echarts@5.0.2/lib/util/graphic.js"
Loaded module: "/zrender@5.0.4/lib/tool/path.js"
Loaded module: "/zrender@5.0.4/lib/tool/transformPath.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Circle.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Ellipse.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Sector.js"
Loaded module: "/zrender@5.0.4/lib/graphic/helper/roundSector.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Ring.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Polygon.js"
Loaded module: "/zrender@5.0.4/lib/graphic/helper/poly.js"
Loaded module: "/zrender@5.0.4/lib/graphic/helper/smoothSpline.js"
Loaded module: "/zrender@5.0.4/lib/graphic/helper/smoothBezier.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Polyline.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Line.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/BezierCurve.js"
Loaded module: "/zrender@5.0.4/lib/graphic/shape/Arc.js"
Loaded module: "/zrender@5.0.4/lib/graphic/CompoundPath.js"
Loaded module: "/zrender@5.0.4/lib/graphic/LinearGradient.js"
Loaded module: "/zrender@5.0.4/lib/graphic/Gradient.js"
Loaded module: