现在位置首页 / 项目实战 /正文

Echarts3模块化包引入时问题报[MODULE_MISS]问题

作者: IT小兵 | 2016年5月18日| 热度:℃ | 评论: |参与:

在用Echarts3模块化包引入时(引入源码),总是会报[module_miss]问题。如下:

Uncaught Error: [MODULE_MISS]"zrender/Element" is not exists!t 
Uncaught Error: [MODULE_MISS]"zrender/container/Group" is not exists!

网上找了不少资料,没能解决问题。也可能是自己AMD基础不行吧,呵呵!最后只能用笨办法一点点排除了!还好终于找出原因了,在此记录下来。

寻根溯源

其实开始接触echarts的是2.2.7的版本,而我当时用的esl是2.1.2的(如下),结果当我把echarts从版本2.2.7升级到3.0.1的时候,esl还是用原来的版本,结果导致问题产生。最后直接引用echarts3源文件自带的test目录下的esl(实际是1.8.8版本)问题就解决了。

<!-- compressed ,version 2.1.2 【不适用echarts3】--><script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/2-1-2/esl.js"></script>

解决方案

 1. 直接引用echarts3源文件自带的test目录下的esl(实际是1.8.8版本)
 2. 用最新的2.1.4版本的esl也不会产生问题。
<!-- compressed ,version 2.1.2 【适用echarts3】--><script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/2-1-4/esl.js"></script>

echarts3模块化包引入源码方法

<!DOCTYPE html><html><head>
    <title>Echarts3模块化包引入源码-入门</title>
    <meta charset="utf-8" content="text/html"></head><body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div></body><!--<script src="./echarts-master/test/esl.js"></script>--><script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/2-1-4/esl.js"></script><!--<script src="./config.js"></script>--><script >
    require.config({
        packages: [
            {
                name: 'zrender',
                location: 'zrender/src', // zrender与echarts在同一级目录
                main: 'zrender'
            },
            {
                name: 'echarts',
                location: 'echarts-master/src',
                main: 'echarts'
            }
        ]        // urlArgs: '_v_=' + +new Date()
    });    require([        'echarts',        'echarts/chart/bar',        'echarts/component/legend',        'echarts/component/axis'
    ],function(echarts){////        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量2']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量2',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })</script></html>

其中目录结果如下: 
这里写图片描述

题外话

关于echarts3官方文档,个人感觉在模块化包引入源码这块有所欠缺,虽然在下载的源码文件里的test目录里有,但是好像隐藏得有点深^_^


    点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
    友荐云推荐

    未注明转发、原文均为本站原创。分享本文请注明 原文链接

    给您更多信息和帮助

    在这里您可以找到更多:

    技术交流群:346717337 Jquery插件交流

    投稿:suchso@vip.qq.com

    承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

    抢天猫双11红包
    推荐使用阿里云服务器
    echarts教程系列
    本月最热文章

    微信扫一扫,徜徉悠嘻网,您的休闲乐园

    微信公众号:快乐每一天

    随机文章
    标签

    技术交流群:346717337

    投稿:suchso@vip.qq.com

    专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询