標籤式單文件引入
自1.3.5開始，ECharts提供標籤式引入。如果你的項目本身並不是基於模塊化開發的，或者是基於CMD規範（如使用的是seajs），那麼引入基於AMD模塊化的echarts可能並不方便，我們建議你採用srcipt標籤式引入，忘掉require。Srcipt標籤引入echarts後將可以直接使用兩個全局的命名空間：echarts，zrender，可參考ECharts標籤式引入，需要注意的是excanvas依賴body標籤插入Canvas節點去判斷Canvas的支持，如果你把引用echarts的script標籤放置head內在IE8-的瀏覽器中會出現報錯，解決的辦法就是把標籤移動到body內（後）。
標籤式引入環境中，常用模塊的引用可通過命名空間直取，同模塊化下的路徑結構，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')
//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
</script>
</body>
可以直接引入的單文件如下：
- dist/echarts-all.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖數據
- source/echarts-all.js : 未壓縮，全圖表，包含world，china以及34個省市級地圖數據，可用於調試
如下例子：
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script type="text/javascript" src="../../plugins/echarts/dist/echarts-all.js"></script>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts圖表
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['週一','週二','週三','週四','週五','週六','週日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'搜索引擎',
type:'line',
stack: '總量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 爲echarts對象加載數據
myChart.setOption(option);
</script>
模塊化單文件引入（推薦）
如果你使用模塊化開發但並沒有自己的打包合併環境，或者說你不希望在你的項目裏引入第三方庫的源文件，我們建議你使用單文件引入，同模塊化包引入一樣，你需要熟悉模塊化開發。
自2.1.8起，我們爲echarts開發了專門的合併壓縮工具echarts-optimizer。如你所發現的，build文件夾下已經包含了由echarts-optimizer生成的單文件：
- dist（文件夾） : 經過合併、壓縮的單文件
-
- echarts.js : 這是包含AMD加載器的echarts主文件，需要通過script最先引入
- chart（文件夾） : echarts-optimizer通過依賴關係分析同時去除與echarts.js的重複模塊後爲echarts的每一個圖表類型單獨打包生成一個獨立文件，根據應用需求可實現圖表類型按需加載
- line.js : 折線圖（如需折柱動態類型切換，require時還需要echarts/chart/bar）
- bar.js : 柱形圖（如需折柱動態類型切換，require時還需要echarts/chart/line）
- scatter.js : 散點圖
- k.js : K線圖
- pie.js : 餅圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/funnel）
- radar.js : 雷達圖
- map.js : 地圖
- force.js : 力導向佈局圖（如需力導和絃動態類型切換，require時還需要echarts/chart/chord）
- chord.js : 和絃圖（如需力導和絃動態類型切換，require時還需要echarts/chart/force）
- funnel.js : 漏斗圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/pie）
- gauge.js : 儀表盤
- eventRiver.js : 事件河流圖
- treemap.js : 矩陣樹圖
- venn.js : 韋恩圖
- source（文件夾） : 經過合併，但並沒有壓縮的單文件，內容同dist，可用於調試
採用單一文件使用例子見ECharts單一文件引入，存放在example/www下，首先你需要通過script標籤引入echarts主文件
//from echarts example
<body>
<div id="main" style="height:400px;"></div>
...
<script src="./js/echarts.js"></script>
</body>
在主文件引入後你將獲得一個AMD環境，配置require.conifg如下：
//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>
require.config配置後就可以通過動態加載使用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'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
</body>
總結來說，模塊化單文件引入ECharts，你需要如下4步：
- 爲ECharts準備一個具備大小（寬高）的Dom（當然可以是動態生成的）
- 通過script標籤引入echarts主文件
- 爲模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js所在目錄，見上述說明
- 動態加載echarts及所需圖表然後在回調函數中開始使用（容我羅嗦一句，當你確保同一頁面已經加載過echarts，再使用時直接require('echarts').init(dom)就行）
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['銷量']
},
xAxis : [
{
type : 'category',
data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"銷量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>