Echarts使用教程

模块化单文件引入（推荐）

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

找到官方文档，点击下载，在这里下载的是第二个。下载后目录是如下图，我们开发用的是build目录

自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步：

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

模块化单文件引入（推荐）

猜你喜欢