一、非模塊化——單文件引入：
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'
}
]
});