码迷,mamicode.com
首页 > 其他好文 > 详细

使用--echarts

时间:2015-10-13 10:25:51      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

  1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)
    //from echarts example
    <body>
        <div id="main" style="height:400px;"></div>
        ...
        <script src="./js/echarts.js"></script>
    </body>
  2. 通过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>
  3. 为模块加载器配置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>
  4. 动态加载echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require(‘echarts‘).init(dom)就行)

使用--echarts

标签:

原文地址:http://www.cnblogs.com/liujiangping/p/4873605.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!