Introducing ECharts

echarts provides a variety of import methods, please choose the appropriate method according to your project type:

Modular package introduction

If you are familiar with modular development, your project itself is modular and complies with AMD specifications, then introducing echarts will be very simple, use a module loader that complies with AMD specifications, such as esl.js , just configure the packages path to point to src That is, you will enjoy the greatest flexibility such as on-demand loading of charts. Since echarts relies on the underlying zrender, you need to download the zrender to the local at the same time, you can refer to the demo , you need to configure as follows.

It should be noted that package introduction provides the greatest flexibility in the development phase, but it is not suitable for direct launch. Reducing the number of requested files is the most basic but important rule in front-end performance optimization. Be sure to do file connection compression when going online. .

//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender and echarts are in the same level directory
            main: 'zrender'
        }
    ]
});

Modular single-file import ( recommended )

If you use modular development but do not have your own packaging and merging environment, or you do not want to import source files of third-party libraries into your project, we recommend that you use single-file import. Like modular package import, you need to Familiar with modular development.

Since 2.1.8, we have developed a special merge compression tool echarts-optimizer for echarts . As you found, the build folder already contains the single file generated by echarts-optimizer :

dist (folder) : merged, compressed single file
- echarts.js : This is the main echarts file containing the AMD loader, which needs to be imported first through script
- chart (folder): echarts-optimizer removes duplicate modules with echarts.js through dependency analysis and generates a separate file for each chart type of echarts, which can be loaded on demand according to application requirements.
  - line.js : line chart (if you need dynamic type switching of broken columns, you also need echarts/chart/bar when you require)
  - bar.js : column chart (if you need dynamic type switching of broken columns, echarts/chart/line is also required when requiring)
  - scatter.js : scatter plot
  - k.js : candlestick chart
  - pie.js : Pie chart (if you need dynamic type switching of pie funnel chart, you also need echarts/chart/funnel when require)
  - radar.js : radar chart
  - map.js : map
  - force.js : force-directed layout diagram (if you need dynamic type switching of force-directed chords, echarts/chart/chord is also required when requiring)
  - chord.js : chord diagram (if you need dynamic chord type switching, you also need echarts/chart/force when require)
  - funnel.js : funnel chart (if you need dynamic type switching of pie funnel chart, you also need echarts/chart/pie when require)
  - gauge.js : Dashboard
  - eventRiver.js : event river graph
  - 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)就行）