`
zengshaotao
  • 浏览: 792906 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

引入ECharts

 
阅读更多

引入ECharts

echarts提供多种引入方式,请根据你的项目类型选择合适的方式:

模块化包引入

如果你熟悉模块化开发,你的项目本身就是模块化且遵循AMD规范的,那引入echarts将很简单,使用一个符合AMD规范的模块加载器,如esl.js,只需要配置好packages路径指向src即可,你将享受到图表的按需加载等最大的灵活性,由于echarts依赖底层zrender,你需要同时下载zrender到本地,可参考demo,你需要配置如下。

需要注意的是,包引入提供了开发阶段最大的灵活性,但并不适合直接上线,减少请求的文件数量是前端性能优化中最基本但很重要的规则,务必在上线时做文件的连接压缩。

//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});

模块化单文件引入(推荐

如果你使用模块化开发但并没有自己的打包合并环境,或者说你不希望在你的项目里引入第三方库的源文件,我们建议你使用单文件引入,同模块化包引入一样,你需要熟悉模块化开发。

自2.1.8起,我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的,build文件夹下已经包含了由echarts-optimizer生成的单文件:

  • dist(文件夹) : 经过合并、压缩的单文件
    • echarts.js : 这是包含AMD加载器的echarts主文件,需要通过script最先引入
    • chart(文件夹) : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件,根据应用需求可实现图表类型按需加载
      • line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)
      • bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)
      • scatter.js : 散点图
      • k.js : K线图
      • pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)
      • radar.js : 雷达图
      • map.js : 地图
      • force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)
      • chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)
      • funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)
      • gauge.js : 仪表盘
      • eventRiver.js : 事件河流图
      • treemap.js : 矩阵树图
      • venn.js : 韦恩图
  • source(文件夹) : 经过合并,但并没有压缩的单文件,内容同dist,可用于调试

采用单一文件使用例子见ECharts单一文件引入,存放在example/www下,首先你需要通过script标签引入echarts主文件

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
</body>

在主文件引入后你将获得一个AMD环境,配置require.conifg如下:

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
    </script>
</body>

require.config配置后就可以通过动态加载使用echarts

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    ...
                }
                myChart.setOption(option);
            }
        );
    </script>
</body>

总结来说,模块化单文件引入ECharts,你需要如下4步:

  1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)
  2. 通过script标签引入echarts主文件
  3. 为模块加载器配置echarts的路径,从当前页面链接到echarts.js所在目录,见上述说明
  4. 动态加载echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)
分享到:
评论

相关推荐

    layui中引入echarts示例.rar

    确保在layui的`layui.all.js`之后引入ECharts的JS文件,因为ECharts的初始化需要DOM加载完成。例如: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;layui与ECharts结合示例 &lt;!-- 图表容器 --&gt; ;height:400px;"&gt; ...

    uni-app 引入echarts饼图,其他图形一样,按需引入

    在uni-app中引入ECharts,首先需要确保已经安装了ECharts库。这通常可以通过npm或yarn来完成,命令可能是`npm install echarts --save`或`yarn add echarts`。安装完成后,我们需要将ECharts引入到项目中。例如,在`...

    引入echarts。js文件 可直接开发

    aa

    echarts三种引入方式

    这种方式使得项目依赖管理更规范,同时可以通过模块化方式按需引入ECharts的部分功能,减少打包后的文件大小。 ### 3. 直接下载引入 对于不使用模块化系统或者对网络速度有特殊要求的项目,可以选择直接从ECharts...

    superset引入echarts

    本文旨在介绍如何在Superset v0.26版本中引入ECharts,并通过实现漏斗图功能为例进行详细说明。 #### 二、准备工作:安装Node.js和Yarn ##### 1. 安装Node.js - **下载最新tar包**:访问[nodejs.org]...

    jsp中使用echarts示例

    在JSP页面中,首先需要引入ECharts的JavaScript库。这通常通过在HTML的`&lt;head&gt;`部分添加CDN链接或本地引入js文件来完成。例如: ```html &lt;script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts...

    Extj和Echarts组件(组合组件)

    1. **嵌入ECharts图表到ExtJS组件**:在ExtJS的Panel或其他容器组件中,通过内联HTML或使用`Ext.util.CSS`来引入ECharts的JavaScript和CSS资源。然后,在组件的`rendered`事件中初始化ECharts实例,设置相应的配置项...

    birt和echarts整合

    3. **自定义JavaScript**:BIRT允许在报告中添加自定义JavaScript代码,这对于引入ECharts库和创建图表实例至关重要。你需要在报告的HTML元素中引入ECharts的JavaScript库,然后编写初始化图表的JS代码。 4. **资源...

    ASP.NET操作echarts

    首先,我们需要在 ASP.NET 项目中引入 ECharts 的 JavaScript 库。通常,这可以通过在 HTML 页面的 `&lt;head&gt;` 标签中添加 ECharts 的 CDN 链接或者将 ECharts 的 js 文件下载到项目中本地引用。例如: ```html ...

    uniapp微信小程序使用echarts

    在uni-app的页面中,你需要引入ECharts,并且对uni-ec-canvas进行初始化配置。在`onLoad`生命周期函数中加载ECharts,并在`onReady`中初始化: ```javascript import ECharts from '@/components/uni-ec-canvas/uni...

    微信小程序使用echarts图表

    1. **引入ECharts库** 在微信小程序中,我们不能直接使用CDN来加载ECharts库,因为小程序不支持外部资源的直接引用。你需要将ECharts的源码文件或预编译后的文件放入项目的`lib`目录下。在这个案例中,`echarts-for...

    AngularJS 自定义指令 - ECharts 2 雷达图

    要在AngularJS中封装ECharts雷达图,首先需要引入ECharts库,然后创建一个指令。指令的链接函数`link`中可以初始化ECharts实例,并配置雷达图的属性,如`series`、`legend`、`tooltip`等。同时,可以通过`scope`...

    Axure9.0教程:通过内联框架引入echarts图表、视频.docx

    Axure 9.0 教程:通过内联框架引入 echart 图表、视频 Axure 是一个功能强大的原型设计工具,通过内联框架可以引入各种外部资源,例如 echart 图表和视频等,使得原型更加生动、交互性强。下面我们将详细介绍如何...

    uni-app封装echarts折线图,安卓真机测试可以使用

    2. 在组件中引入ECharts的JS库,并配置好需要的图表选项。 3. 使用uni-app的`uni.createSelectorQuery()`方法获取canvas元素,这是ECharts需要绘制的地方。 4. 调用ECharts的`init`方法初始化图表,但不立即渲染,...

    QT中加入Echarts.rar

    1. **安装和引入ECharts库**:首先,你需要下载ECharts的JavaScript文件。ECharts通常会提供一个压缩包,包含所有必要的js文件,例如`main.js`。将这些文件保存到QT项目的资源目录下,以便在程序中引用。 2. **创建...

    vue 项目引入echarts 添加点击事件操作

    总结,本文主要介绍了在Vue项目中引入ECharts并添加点击事件监听器的步骤,以及如何利用Vue Router的路由守卫实现用户权限控制。这些技术在实际开发中非常实用,能帮助构建安全、功能丰富的Web应用。

    Layui整合Echarts5.zip

    6. **新特性**:ECharts 5.0.2 可能引入了新的图表类型、交互方式或者API,比如更丰富的自定义选项、更灵活的图表组合等,这些新特性可以为数据展示带来更多的可能性。 在实际应用中,我们可以根据项目需求,利用这...

    angular4中引入echarts的方法示例

    在Angular4项目中引入ECharts图表库是进行数据可视化的一个常见需求。ECharts是由百度开发的一个开源的图表库,支持各种丰富的图表类型,能够方便地展示数据统计结果。而Angular是一个由Google开发和维护的强大的...

    推荐了多个详细的echarts资源

    然后,在 JavaScript 代码中,需要引入 Echarts 库并创建一个 Echarts 实例,最后,使用 option 对象配置图表的各种属性。 Echarts 教程 在 Runoob 的 ECharts 教程中,提供了详细的 Echarts 入门教程,包括 ...

    【JavaScript源代码】Vue导入Echarts实现折线散点图.docx

    首先,要将 Echarts 引入 Vue 项目,你需要执行以下 npm 命令: ```bash npm install echarts --save ``` 这将把 Echarts 安装为项目的依赖,并将其写入 `package.json` 文件。接下来,在 `main.js` 文件中,你...

Global site tag (gtag.js) - Google Analytics