ECharts數據圖表使用介紹 超詳細
【前言】
最近在搗鼓各種插件各種框架，發現這個ECharts還是比較不錯的，文檔也挺全的，還是中文的，給大家推薦一下。
這篇文章是零基礎入門ECharts圖表的教程，先簡單介紹一下吧，可能有人還不知道這個東西。
【簡介】
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。
好了，咱們重點不是介紹哈，后面我會詳細講解這個報表系統的使用，這里就不做過多的描述了，下面開始進入正題：“5分鐘上手寫ECharts的第一個圖表”。
【方法一：模塊化單文件引入(推薦)】
1. 新建一個echarts.html文件，為ECharts準備一個具備大小(寬高)的Dom：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts - 孤影'Blog</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
</body></pre>
2. 新建<script>標簽引入模塊化單文件echarts.js：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts - 孤影'Blog</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body> 3. 新建<script>標簽中為模塊加載器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts - 孤影'Blog</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'
}
});
</script>
</body> 4. <script>標簽內動態加載echarts和所需圖表，回調函數中可以初始化圖表并驅動圖表的生成：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts - 孤影'Blog</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src=";
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: '
// 使用
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></pre>
5. 瀏覽器中打開ecarts.html，就可以看到以下效果：
【方法二：標簽式單文件引入】
1. 新建一個echarts.html文件，為ECharts準備一個具備大小(寬高)的Dom。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts - 孤影Blog</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
</body> 2. 新建<script>標簽引入echart-all.js。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts - 孤影'Blog</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</body> 3. 新建<script>，使用全局變量echarts初始化圖表并驅動圖表的生成。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts - 孤影'Blog</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src=";
<script type="text/javascript">
// 基于準備好的dom，初始化echarts圖表
var myChart = echarts.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></pre>
4. 瀏覽器中打開echarts.html，可以看到如下效果：
來源： 孤影'Blog