ECharts开始

为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）

//from echarts example

<body>

    <div id="main" style="height:400px;"></div>

    ...

    <script src="./js/echarts.js"></script>

</body>

通过script标签引入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'

            }

        });

    </script>

</body>

为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明

//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及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

相关文章