ECharts 之引用ECharts

来源：互联网发布：haproxy acl 多域名编辑：程序博客网时间：2024/05/29 14:12

获取ECharts

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
在ECharts的GitHub上下载最新的release版本，解压出来的文件夹里的dist目录可以找到最新版本的echarts库
通过 npm 获取 echarts，npm install echarts –save，详见“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。
引入ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <script src="echarts.min.js"></script></head></html>

ECharts2的引入与ECharts3不同。若你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
模块化单文件引入ECharts需要如下4步：

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

//from echarts examplerequire.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生成的单文件：
这里写图片描述

采用单一文件，首先需要通过script标签引入echarts主文件

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

在主文件引入后将获得一个AMD环境，配置require.config如下：

<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

<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 = {                    ...//option中可自定义样式                }                myChart.setOption(option);            }        );    </script>

如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require(‘echarts/config’)， zrender.tool.color = require(‘zrender/tool/color’)

    <div id="main" style="height:400px;"></div>    ...    <script src="example/www2/js/dist/echarts-all.js"></script>    <script>        var myChart = echarts.init(document.getElementById('main'));        var option = {            ...        }        myChart.setOption(option);    </script>

0 0