Echarts图表入门示例
发布于 2015-01-20 06:06:13 | 2613 次阅读 | 评论: 0 | 来源: PHPERZ
ECharts Javascript免费图表库
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
本文为大家讲解的是一个Echarts的图表入门示例代码，ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，感兴趣的同学参考下。
ECharts是什么
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
一 步骤
引入ECharts，你需要如下4步：
为ECharts准备一个具备大小（宽高）的Dom
通过script标签引入echarts主文件
为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录
动态加载echarts及所需图表然后在回调函数中开始使用（确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行
二 示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>New Document</TITLE>
<script src="echarts/esl.js" type="text/javascript"></script>
<script type="text/javascript">
require.config({
paths : {
echarts : 'echarts/echarts',
'echarts/chart/line' : 'echarts/echarts',
'echarts/chart/bar' : 'echarts/echarts'
}
});
function load() {
var title = "停车场收费情况";
var yname = "费用（元）";
var legendArray = [ '停车场1', '停车场2', '停车场3' ];
var type = "line";
var xarray = [ '00:00~04:00', '04:00~06:00', '06:00~08:00',
'08:00~11:00', '11:00~13:00', '13:00~17:00', '17:00~19:00',
'19:00~22:00', '22:00~24:00' ];
var yarray = [ [ 56, 51, 92, 34, 60, 78, 65, 70, 68 ],
[ 51, 48, 62, 90, 43, 37, 3, 30, 28 ],
[ 81, 35, 44, 98, 16, 53, 61, 40, 55 ] ];
showChart(title, yname, legendArray, type, xarray, yarray);
}
function showChart(title, yname, legendArray, type, xarray, yarray) {
require([ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' ],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
var yseries = [];
for (var i = 0; i < yarray.length; i++) {
var series = {
name : legendArray[i],
type : type,
smooth : true,
data : yarray[i],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
};
yseries.push(series);
}
var option = {
title : {
text : title
//title
},
tooltip : {
trigger : 'axis'
},
legend : {
data : legendArray
//legendArray
},
toolbox : {
show : true,
feature : {
dataView : {
show : true,
readOnly : true
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
saveAsImage : {
show : true
}
}
},
xAxis : [ {
name : '时间',
type : 'category',
boundaryGap : false,
data : xarray
//xarray
} ],
yAxis : [ {
name : yname,
type : 'value',
axisLabel : {
formatter : '{value}'
}
} ],
series : yseries
//yseries
};
myChart.setOption(option);
});
}
</script>
</head>
<body onLoad="load()">
<div class="easyui-panel border-radius"
data-options="iconCls:'cus-icon-user'"
style="width: 100%; height: 100%; padding: 10px; overflow: auto;">
<div id="main" style="height: 400px;"></div>
</div>
</body>
</html>
三 效果
四 名词解析
基本名词
| 名词 | 描述 |
|---|---|
| chart | 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 |
| axis | 直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型 |
| xAxis | 直角坐标系中的横轴，通常并默认为类目型 |
| yAxis | 直角坐标系中的纵轴，通常并默认为数值型 |
| grid | 直角坐标系中除坐标轴外的绘图网格 |
| legend | 图例，表述数据和图形的关联 |
| dataRange | 值域选择，常用于展现地域数据时选择值域范围 |
| dataZoom | 数据区域缩放，常用于展现大数据时选择可视范围 |
| roamController | 缩放漫游组件，搭配地图使用 |
| toolbox | 辅助工具箱，辅助功能，如添加标线，框选缩放等 |
| tooltip | 气泡提示框，常用于展现更详细的数据 |
| timeline | 时间轴，常用于展现同一组数据在时间维度上的多份数据 |
| series | 数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据 |
图表名词
| 名词 | 描述 |
|---|---|
| line | 折线图，堆积折线图，区域图，堆积区域图。 |
| bar | 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。 |
| scatter | 散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图 |
| k | K线图，蜡烛图。常用于展现股票交易数据。 |
| pie | 饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。 |
| radar | 雷达图，填充雷达图。高维度数据展现的常用图表。 |
| chord | 和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据 |
| force | 力导布局图。常用于展现复杂关系网络聚类布局。 |
| map | 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。 |
| evnetRiver | 事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。 |
图表类型
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：
推荐阅读
最新资讯