Question

我想通过Javascript设计一些幻灯片，并使用Reveal库并按照模板进行操作 https://github.com/hakimel/reveal.js/blob/master/index.html

并计划通过echarts库将图表嵌入到幻灯片中并按照此演示进行操作 http://ecomfe.github.io/echarts/doc/start-en.html

我将这两个库作为以下目录而不更改echarts /揭示库。

|--echarts-2.2.0
|--reveal.js
\--mySlides.html

当我将这两个演示合并在一起时，我得到了“require.config”的“匿名函数”。不知道如何调试它。有人可以帮忙吗？感谢。

未捕获的ReferenceError：未定义显示（匿名函数）mySlides.html：36

mySlides.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">

    <title>reveal.js - The HTML Presentation Framework</title>

    <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
    <meta name="author" content="Hakim El Hattab">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="reveal.js/css/reveal.css">
    <link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
</head>
<body>

<div class="reveal">

    <!-- Any section element inside of this container is displayed as a slide -->
    <div class="slides">

            <section id="page1" data-background="#ff0000">
                    <div id="main" style="height:400px"></div>
                    <!-- ECharts单文件引入 -->
                    <script src="echarts-2.2.0/build/dist/echarts.js"></script>
                    <script type="text/javascript">
                        require.config({
                            paths: {
                                echarts: 'echarts-2.2.0/build/dist'
                            }
                        });

                        // 使用
                        require(
                                [
                                    'echarts',
                                    'echarts/chart/bar'
                                ],
                                function (ec) {
                                    var myChart = ec.init(document.getElementById('main'));

                                    var option = {
                                        tooltip: {
                                            show: true
                                        },
                                        legend: {
                                            data:['销量']
                                        },
                                        xAxis : [
                                            {
                                                type : 'category',
                                                data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                                            }
                                        ],
                                        yAxis : [
                                            {
                                                type : 'value'
                                            }
                                        ],
                                        series : [
                                            {
                                                "name":"销量",
                                                "type":"bar",
                                                "data":[5, 20, 40, 10, 10, 20]
                                            }
                                        ]
                                    };
                                    myChart.setOption(option);
                                }
                        );
                    </script>
            </section>
            <section id="page2"><p>Page2</p></section>
    </div>

</div>

<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>

<script>

    // Full list of configuration options available at:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        transition: 'slide', // none/fade/slide/convex/concave/zoom

        // Optional reveal.js plugins
        dependencies: [
            { src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
            { src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
            { src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
            { src: 'reveal.js/plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
            { src: 'reveal.js/plugin/zoom-js/zoom.js', async: true },
            { src: 'reveal.js/plugin/notes/notes.js', async: true }
        ]
    });

</script>

</body>

Answer 1

您好像缺少requirejs文件加载器。把它放在你文件的标题中，让我知道是否可以修复它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.js"></script>

如何修复Javascript＆＃34;匿名函数＆＃34;

1 个答案: