ECharts - 数据图表的使用
2015-10-16 本文已影响3025人
Jovey
欢迎移步我的博客阅读：《ECharts - 数据图表的使用》
ECharts
关于ECharts（ECharts）
ECharts 是百度提供的一款开源、功能强大的数据可视化产品。
主要提供折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图。
特性
- 拖拽重计算
- 数据视图
- 多图联动
- 值域漫游
- 炫光特效
……
准备
下载 ECharts 静态包【echarts-2.2.7】，也可以直接使用链接进行加载。建议下载静态包，避免官方 更新新特性 时造成图表无法正常呈现的问题。
使用
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>
- 动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，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对象加载数据
myChart.setOption(option);
}
);
-
最后的样子：
重点- option 部分相关配置说明
用户可以在 option 配置里自定义图标的样式。
-
title 标题：
title : {
text: '某地区蒸发量和降水量', //文本
subtext: '纯属虚构'
}
-
toolbox 便捷的工具：
toolbox: {
show : true, //是否显示工具栏
feature : { //特性
mark : {show: true}, //辅助线
dataView : {show: true, readOnly: false}, //数据视图
magicType : {show: true, type: ['line', 'bar']}, //切换视图（折线/柱状）
restore : {show: true}, //重新加载视图
saveAsImage : {show: true} //保存该视图为图片
}
}
- series 数据列表：
series : [
{
name:'蒸发量', //名称
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], //数据
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 轴左侧，默认顶部居中
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] //显示文本
}
更多配置可在【实例】中点开测试。
