推荐模块化单文件引入
- dist（文件夹） : 经过合并、压缩的单文件
-
- echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
- chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
- echarts-line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
- echarts-bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
- echarts-scatter.js : 散点图
- echarts-k.js : K线图
- echarts-pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
- echarts-radar.js : 雷达图
- echarts-map.js : 地图
- echarts-force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
- echarts-chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
- echarts-funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
- echarts-gauge.js : 仪表盘
- echarts-eventRiver.js : 事件河流图
首先通过script标签引入echarts主文件
<body>
<div id="main" style="height:400px;"></div>
...
<script src="../Public/echarts-2.2.1/build/dist/echarts.js"></script>
</body>
每个人的路径可能放的不一样。
在主文件引入后将获得一个AMD环境，AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
配置require.config如下：
<div id="main" style="height:500px"></div>
<script src="../Public/echarts-2.2.1/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '../Public/echarts-2.2.1/build/dist'
}
});
</script>
require.config配置后就可以通过动态加载使用echarts
<div id="main" style="height:500px"></div>
<script src="../Public/echarts-2.2.1/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: '../Public/echarts-2.2.1/build/dist'
}
}); require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = { ... } myChart.setOption(option); } ); </script>
总结来说，模块化单文件引入ECharts，你需要如下4步：
- 为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
- 通过script标签引入echarts主文件
- 为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
- 动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
