学步园

API：  http://echarts.baidu.com/doc/doc.html

example_demo： http://echarts.baidu.com/doc/example.html

使用echarts的步骤：

1． 引入echarts的js库（两种方式）

    链接：

http://echarts.baidu.com/doc/doc.html#引入ECharts

    js模块化-链接：http://www.ruanyifeng.com/blog/2012/11/require_js.html

    a)     模块化的js单文件引入：required

    b)     标签式的js单文件引入：<script>

2． 创建一个用于显示echarts的div（必须有高度和宽度大小的）

3． Echarts详细操作

a) 模块化的js单文件引入：required

build文件夹下已经生成了多个单文件见下，根据你的需求使用：

·        echarts.js : 经过压缩，包含除地图外的全部图表

·        echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表

·        echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据

·        echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

ECharts模块化单一文件引入---链接：http://echarts.baidu.com/doc/example/www/index.html

require.config({ 
    paths:{'echarts:'./js/echarts', 'echarts/chart/bar':'./js/echarts', 'echarts/chart/line':'./js/echarts'}
	//默认paths会自动为文件加上后缀.js，所以此处要写上正确的文件名(省略后缀)
});
//动态加载了echarts库后，可以直接在回调函数中使用
require(
    ['echarts', 'echarts/chart/line', 'echarts/chart/bar'],
    function (ec) {
        var myChart = ec.init(domMain);//有高度宽度大小的DIV
        var option = {...};
        myChart.setOption(option);
    }
);

// -----------------------------

// 非入口或再次使用，图表已被加载注册后
require('echarts').init(dom).setOption({...});

// 如果需要再次使用ECharts的图表实例，建议你还是保存init返回的图表实例吧
var myChart = require('echarts').init(dom);
myChart.setOption({...}); 

b) 标签式的js单文件引入：<script>

不用require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender。

Echarts标签式文件引入---链接：view-source:http://echarts.baidu.com/doc/example/www2/index.html

< script src="example/www2/js/echarts-plain.js" > < /script>
< script >
    var myChart = echarts.init(domMain);
    var option = {...};
    myChart.setOption(option);
< /script>