Echarts 常用功能 api

一、非模块化——单文件引入：
1、首先毫无疑问通过 script 标签引入 echarts 文件，官网 http://echarts.baidu.com/echarts2/index.html 可以下载
2、通过官网的例子结合实际补充说明
// srcipt 标签式引入
var myChart = echarts.init(document.getElementById('main'));

// 过渡---------------------
myChart.showLoading({
text: '正在努力的读取数据中...', //loading 话术
});

// ajax getting data...............

// ajax callback
myChart.hideLoading();

// 图表使用-------------------
var option = {
legend: { // 图例配置
padding: 5, // 图例内边距，单位 px，默认上 下左右内边距为 5
itemGap: 10, // Legend各个item之间的间隔， 横向布局时为水平间隔，纵向布局时为纵向间隔
data: ['ios', 'android']
},
tooltip: { // 气泡提示配置
trigger: 'item', // 触发类型，默认数据触发，可选为： 'axis'
},
xAxis: [ // 直角坐标系中横轴数组
{
type: 'category', // 坐标轴类型，横轴默认为类目轴， 数值轴则参考 yAxis 说明
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ // 直角坐标系中纵轴数组
{
type: 'value', // 坐标轴类型，纵轴默认为数值轴， 类目轴则参考 xAxis 说明
boundaryGap: [0.1, 0.1], // 坐标轴两端空白策略，数组内 数值代表百分比
splitNumber: 4 // 数值轴用，分割段数，默认为 5
}
],
series: [
{
name: 'ios', // 系列名称
type: 'line', // 图表类型，折线图 line、散点图 scatter、柱状图 bar、饼图 pie、雷达图 radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
},
{
name: 'android', // 系列名称
type: 'line', // 图表类型，折线图 line、散点图 scatter、柱状图 bar、饼图 pie、雷达图 radar
data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
}
]
};
myChart.setOption(option);

...

// 增加些数据------------------
option.legend.data.push('win');
option.series.push({
name: 'win', // 系列名称
type: 'line', // 图表类型，折线图 line、散点图 scatter、柱状图 bar、饼图 pie、雷达图 radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);

...

// 图表清空-------------------
myChart.clear();

// 图表释放-------------------
myChart.dispose();
legend：图例，每个图表最多仅有一个图例，下图中顶部中间
toolbox：工具箱，每个图表最多仅有一个工具箱，下图中顶部最右边
xAxis：横轴数组
yAxis：纵轴数组 axisLine 是数组中通用属性 [{axisLine:{ *** }}]

3、API 说明
http://echarts.baidu.com/echarts2/doc/doc.html#AxisAxisline
二、模块化包引入：
通过 require 引入，这里说一下 require 的使用背景



实现 JS 文件文件的异步加载，避免网页失去响应
管理模块之间的依赖性，便于代码的编写和维护

引入 require 考虑到加载时长，可以放到网页底部，也可以用 async 属性，IE 不支持，只 支持 defer，如下写就可以（data-main 指定网页程序主模块，若主模块依赖于其他模块， 需要使用 AMD 规范定义的的 defer()函数）
<script src="js/require.js" defer async="true" data-main="js/main" ></script>// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

// some code here
});

下面是 echarts 官网上的引入的例子：
//from echarts examplerequire.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender 与 echarts 在同一级目录
main: 'zrender'
}
]
});