歡迎移步我的博客閱讀：《ECharts - 數(shù)據(jù)圖表的使用》
ECharts
關(guān)于ECharts（ECharts）
ECharts 是百度提供的一款開源躁垛、功能強大的數(shù)據(jù)可視化產(chǎn)品。
主要提供折線圖教馆、柱狀圖、散點圖土铺、K線圖、餅圖、雷達圖究恤、地圖、和弦圖部宿、力導向布局圖、儀表盤以及漏斗圖瓢湃。
特性
- 拖拽重計算
- 數(shù)據(jù)視圖
- 多圖聯(lián)動
- 值域漫游
- 炫光特效
……
準備
下載 ECharts 靜態(tài)包【echarts-2.2.7】，也可以直接使用鏈接進行加載绵患。建議下載靜態(tài)包，避免官方 更新新特性 時造成圖表無法正常呈現(xiàn)的問題落蝙。
使用
ECharts的使用很簡單，以官方提供的為例分為下面幾步：
- 新建一個
test.html并放置一個div來承載圖表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="main" style="height: 400px;"></div>
</body>
</html>
- 引入
echarts.js：
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
- 添加模塊加載器配置 echarts 和所需圖表的路徑（相對路徑為從當前頁面鏈接到echarts.js）筏勒，引入圖表文件見引入 ECharts2：
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
</script>
- 動態(tài)加載echarts和所需圖表，回調(diào)函數(shù)中可以初始化圖表并驅(qū)動圖表的生成管行，option見API & Doc：
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對象加載數(shù)據(jù)
myChart.setOption(option);
}
);
-
最后的樣子：
重點- option 部分相關(guān)配置說明
用戶可以在 option 配置里自定義圖標的樣式套菜。
-
title 標題：
title : {
text: '某地區(qū)蒸發(fā)量和降水量', //文本
subtext: '純屬虛構(gòu)'
}
-
toolbox 便捷的工具：
toolbox: {
show : true, //是否顯示工具欄
feature : { //特性
mark : {show: true}, //輔助線
dataView : {show: true, readOnly: false}, //數(shù)據(jù)視圖
magicType : {show: true, type: ['line', 'bar']}, //切換視圖（折線/柱狀）
restore : {show: true}, //重新加載視圖
saveAsImage : {show: true} //保存該視圖為圖片
}
}
- series 數(shù)據(jù)列表：
series : [
{
name:'蒸發(fā)量', //名稱
type:'bar', //視圖類型
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], //數(shù)據(jù)
markPoint : { //標記
data : [
{type : 'max', name: '最大值'}, //最大值设易，name為顯示文本
{type : 'min', name: '最小值'} //最小值逗柴，name為顯示文本
]
},
markLine : { //標線
data : [
{type : 'average', name: '平均值'} //平均值顿肺，name為顯示文本
]
}
}
- xAxis ： X 軸
- yAxis ： Y 軸
-
legend ：
legend: {
orient : 'vertical', //方向“垂直”，默認從左向右橫向排列
x : 'left', //位于 X 軸左側(cè)屠尊，默認頂部居中
data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎'] //顯示文本
}
更多配置可在【實例】中點開測試旷祸。
