百度echart初用总结

1.先下载echarts.js.我在百度下载的是 echarts-2.2.7 (from Baidu).压缩包里面的build->dist中的echarts.js或者echarts-all.js文件和build->dist->chart里面的各种图表js我才取来用。

2.引入echarts.js文件

　　第一种：模块化单文件引入(推荐)

　　1）最重要的第一步是引入echarts.js。

　　2）主文件引入后你将获得一个AMD环境，然后就开始配置require.config

<script type="text/javascript">
        require.config({
            paths: {
                echarts: 'js'             //我的echarts.js是放在js目录下的。如果是在js另外个文件夹ech里的 js/ech   写成这样就可以了
            }
        });
        require(
            [
                'echarts',　　　　　　　　　　
                'echarts/chart/radar'　　　　　　//我的radar雷达图js是放在js/chart下面的，为什么/chart前面会是echarts我也不太清楚，我猜是表示echarts文件的同级目录吧。。。。我尝试过吧radar.js放在和echarts.js文件同级目录下，然后修改这里的路径，没报错，但是没效果
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('box'));          //绑定装echart图表的盒子
                var option = {
                    ...                                   //设置各种参数
                }
                myChart.setOption(option);　　　　　　　　//为echart对象加载数据　　
            }
        );
    </script>

 

 

 

　　3）给装图表的盒子添加宽高

 

　　第二种：标签式单文件引入

　　1）第一步引入echarts-all.js。这个文件要大一半。。。

　　2）

var myChart = echarts.init(document.getElementById('box'));          //绑定装echart图表的盒子
 　 option = {
  　　    ... 　　　　　　　　　　　　　　　　　　//设置各种参数
 　 };
 　 myChart.setOption(option);　　　　　　　　//为echart对象加载数据

 

 

 

　　3)给装图表的盒子添加宽高

 

　　还有个模块化包引入。http://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts1  自己看文档吧。

 

　　option配置项里的参数，在文档->配置项查找工具里面可以搜索各个配置的信息

　　

　　这里有个http://ecomfe.github.io/echarts-builder-web/在线构建echarts的，但是只适用于echarts2.选择所需图表，然后在线打包成js文件，然后就可以直接用第二种方式引入并使用了。