echarts引入问题:ComponentClass is not a function

我才是老K 发布于 2015/08/28 20:43
阅读 9K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

我是这样引入echarts的,首先,把build里的echarts和chart里的所有js都复制出来放到一个文件夹里了,然后我用require.js将baseUrl指向了这个目录(当然我强制的指定了echarts依赖zrender),在调用最简单的一个柱状图(其实就是官网的一个demo),我这里把源源粘一下:

<script src="require.config.js" type="text/javascript"></script>
    <script src="require.js" type="text/javascript"></script>
    <script type="text/javascript">
        require(['bar','pie','line','echarts'], function (b,p,l,ec) {
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['蒸发量', '降水量']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,//禁止拖拽重新计算(这个设置为true就可以拖动节点了)
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true }
                    }
                ],
                series: [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            };


            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption(option);
        });
    </script>
然后会出一个这样的错误

s is not a function,然后,我把echarts换成源码版的,错误提示为这个

Uncaught TypeError: ComponentClass is not a function

Echarts._render @ echarts.js:2043

Echarts._setOption @ echarts.js:2216

Echarts.setOption @ echarts.js:2195

(anonymous function) @ echarts.html:57 

还请您能有时间帮我看一下,在下这里感激不尽。初次使用echarts,有很多您看来很初级的问题,还请见谅 

加载中
0
v
visualjava
三种引入方式,额,,这用的是哪一种
我才是老K
我这是想用require.js做模块化包引入。但是好像我并没有理解echarts的模块化引入方式,所以才造成了这样的问题。不知您是否使用require.js做过模块化引入,因为我不想使用esl
0
我才是老K

我再补充一下,每次出这个问题的时候,都是componentType被赋值为grid的时候。

我不明白为什么会这样

0
我才是老K
用echarts.all.js是没有问题,但是这个文压缩之后都有接近1MB了,这样加载速度会相当的慢。各位用echarts难道没有用require.js的吗,都是用的esl? 
0
我才是老K

好吧,问题解决了。解决办法如下:

首先说明一下,官方上对于引入的说明可能让我误会了,才导致了这个问题。当然,也有可能是我对commonjs amd cmd这几个的理解还不到家导致,其实也是我对require.js不了解所致。

requirejs也支持这种写法:

看官方的例子上,用esl来引入echarts和zrender的时候,是将两模块文件夹的路径直接加载进去的,即这一段:

require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});
同时,官网上也提到:“ 如果你熟悉模块化开发,你的项目本身就是模块化且遵循AMD规范的,那引入echarts将很简单,使用一个符合AMD规范的模块加载器”,于是我想当然的认为echarts和zrender是用amd规范编写,我看了一下源代码,好像确实也是这样的。然后,我就用require.js(我项目本身就是用的这个,所以就不能再用功能相同的esl了)来引入它们。

由于require.js引入amd模块都是一个一个引的,我没法将整个文件夹都导入进来 (有将整个文件夹引入,但require只是指定一个baseUrl,但echarts和zrender在目录的结构上有相同的部分,合并到一起会有冲突,我也不可能去改他们的源码来解决这个冲突)。所以,我就在找require.js是否有指定多个文件夹的办法。可喜的是,require.js也有packages这个配置,不过官网上的介绍是这样的:

RequireJS supports loading modules that are in a CommonJS Packages directory structure, but some additional configuration needs to be specified for it to work.

也就是说,require.js的packages是给commonjs用的(不知我这样理解是否正确)。但是,我也不管了,照着官网上的方式做了配置,一跑,结果就正常了。

以上就是我的个人理解,如有错误,还请指出,一起学习。

最后,还有一个问题,我采用这种方式之后,require.js加载了相当多的js出来,这些的确是需要的......但是文件数量太多了......不知如何做连接优化了。如果不行的话还是只能用echarts-all.js和zrender.js了,但是echarts-all.js太太了接近1MB,如何将里面的map数据等剔除?

0
我才是老K

好了,这个问题的最终解决办法找到了,下面贴出require的配置:

var require = {
    //"packages": [
    //    {
    //        "name": "echarts",
    //        "location": "echarts/echarts-src",
    //        "main": "echarts"
    //    },
    //    {
    //        "name": "zrender",
    //        "location": "echarts/zrender-src",
    //        "main": "zrender"
    //    }
    //],
    paths:{
        "echarts": "echarts/echarts.amd.source",
        'echarts/chart/line': "echarts/echarts.amd.source",
        'echarts/chart/bar': "echarts/echarts.amd.source"
    },
    //shim: {
    //    echarts: {
    //        deps: ['zrender']
    //    }
    //}
};

然后,在页面引用的时候就可以这样:

require(['echarts',
                'echarts/chart/line',
                'echarts/chart/bar'], function (ec) {......});



至于那个echarts.amd.source.js可以到官网去订制,连接是这个:http://ecomfe.github.io/echarts-builder-web/

回头想想,对于这个问题我走了不少的弯路,让大家见笑了。

最后,希望社区能够活跃一点。国内有不少好的开源项目,确实是好,但是为什么还是有大部分的人喜欢用国外的开源项目,我觉得并不是“国外的月亮圆”,而国外的开源项目他们的社区很活跃,遇到问题之后会有很多人帮你,尽管问题能不能角是一回事,但是会让你知道,大家都是十分关注这个项目的。忠心希望echarts能越来越好。    



0
l
liuyitian
找了半天,找到你这,echarts的官方文档还是不够完善啊,单独搞一套require没问题,但标准的好歹在官方示例中说明啊,多谢了。
返回顶部
顶部