学习笔记：使用echarts画图表
2014-10-25 00:38
134 查看
项目需要在网页上画图表，在网上找了一下，发现百度出品的echarts非常好用。echarts把看似复杂的图表进行了分解，使用结构化的模型来完成图表的配置。画图表就跟写CSS一样，实际上echarts使用的很多属性名字都和CSS是一样的。
echarts有非常详细的文档，官网还提供了很多个例子，很容易学会。
echarts是支持IE8的，虽然IE8不支持canvas，但是echarts画出的图表在IE8显示，目前没有发现有问题。
想学echarts，看官网的文档就可以了。以下是个人学习之后整理的helloworld小例子，以及学习过程中碰到的一些小问题。
1 画一个最粗糙的图表
官方推荐使用模块化单文件引入，我不知道模块化，所以采用了标签式单文件引入。
得到的图表
2 为图表添加各种样式
加了样式之后的结果如下，我想说我很佩服做美工的同学（我自己画的图表真不好看）
3 为图表添加事件
效果就是点击图表之后，可以在下面显示出被点击的类目和对应的数量
4 最后，做了一个小练习，使用jquery来从服务端请求数据
这里，客户端的option一开始只有样式，没有数据。从服务端得到数据之后，把option补全，然后调用setOption方法就OK了。
服务端的servlet如下，这种小东西还写的不熟练：获取文件路径，设置UTF-8编码，关闭流等操作还不够轻车熟路
服务端返回的数据一定要是标准格式的json。标准是指用双引号，不用单引号。另外，最后一个键值对后面不要有逗号，IE8中不允许JavaScript代码中的json采用这种不规范的写法，FireFox容许。
如果在图表已经加载过数据之后，想要换一组数据，可以用getOption方法得到一份option的深拷贝，然后把其中的数据改掉，再调用setOption方法就可以：
echarts有非常详细的文档，官网还提供了很多个例子，很容易学会。
echarts是支持IE8的，虽然IE8不支持canvas，但是echarts画出的图表在IE8显示，目前没有发现有问题。
想学echarts，看官网的文档就可以了。以下是个人学习之后整理的helloworld小例子，以及学习过程中碰到的一些小问题。
1 画一个最粗糙的图表
官方推荐使用模块化单文件引入，我不知道模块化，所以采用了标签式单文件引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts测试</title>
</head>
<body>
<!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"
style="height: 400px; width: 800px; border: 1px dotted black"></div>
<!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->
<script src="../js/echarts-plain-original.js"></script>
<!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->
<script type="text/javascript">
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById('main'));
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
// 标题
title : {
text : '销量和进货量'
},
// x轴
xAxis : [ {
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
} ],
// y轴
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value}件'
}
} ],
// 数值序列
series : [ {
name : '销量',
type : 'line',
data : [ 5, 20, 40, 10, 10, 20 ],
} ]
};
// 为图表实例加载数据
myChart.setOption(option);
</script>
</body>
</html>得到的图表
2 为图表添加各种样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts测试</title>
</head>
<body>
<!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"
style="height: 400px; width: 800px; border: 1px dotted black"></div>
<!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->
<script src="../js/echarts-plain-original.js"></script>
<!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->
<script type="text/javascript">
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById('main'));
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
// 标题
title : {
text : '销量和进货量',
x : 'center',
y : 'top',
textStyle : {
fontSize : 26,
fontFamily : "微软雅黑",
}
},
//
grid : {
borderWidth : 0
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'line',
lineStyle : {
color : '#0f0',
width : 2,
type : 'solid'
}
}
},
// x轴
xAxis : [ {
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],
axisTick : {
show : false
},
splitLine : {
lineStyle : {
type : 'dotted'
}
}
} ],
// y轴
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value}件'
},
splitLine : {
lineStyle : {
type : 'dotted'
}
}
} ],
// 数值序列
series : [ {
name : '销量',
type : 'line',
data : [ 5, 20, 40, 10, 10, 20 ],
itemStyle : {
normal : {
color : '#f00',
lineStyle : {
width : 2
},
label : {
show : true,
position : 'right',
textStyle : {
fontStyle : 'bolder',
fontSize : 15
}
}
}
},
symbol : 'emptyCircle',
symbolSize : 4,
} ]
};
// 为图表实例加载数据
myChart.setOption(option);
</script>
</body>
</html>加了样式之后的结果如下，我想说我很佩服做美工的同学（我自己画的图表真不好看）
3 为图表添加事件
// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
var mes = param.name + ':' + param.value;
document.getElementById('info').innerHTML = mes;
}
}
myChart.on(echarts.config.EVENT.CLICK, eConsole);效果就是点击图表之后，可以在下面显示出被点击的类目和对应的数量
4 最后，做了一个小练习，使用jquery来从服务端请求数据
这里，客户端的option一开始只有样式，没有数据。从服务端得到数据之后，把option补全，然后调用setOption方法就OK了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<title>通过ajax为echarts更新数据</title>
</head>
<body>
<!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"
style="height: 400px; width: 800px; border: 1px dotted black"></div>
<span id="info"></span>
<!-- 第一步：标签式单文件引入。引入之后可以直接使用echarts对象。 -->
<script src="../js/echarts-plain-original.js"></script>
<!-- 注意顺序，使用echarts对象要在引入echarts文件之后 -->
<script type="text/javascript">
$(document).ready(function() {
// 初始化一个图表实例
var myChart = echarts.init(document.getElementById('main'));
// 使用jquery发送post请求，第四个参数指明如何解析服务端返回的数据。
// 服务端返回的必须是标准格式的json，也就是双引号括起来的键值对
$.post("../data", {
name : "testdata"
}, function(data) {
option.title.text = data.title;
option.xAxis[0].data = data.category;
option.series[0].data = data.value;
// 取得数据后显示到图表中
myChart.setOption(option);
myChart.on(echarts.config.EVENT.CLICK, eConsole);
}, 'json');
// echarts把复杂的图表结构化，图表的基本结构包括以下部分：标题，x轴，y轴，数值序列。
var option = {
// 标题
title : {
x : 'center',
y : 'top',
textStyle : {
fontSize : 26,
fontFamily : "微软雅黑",
}
},
//
grid : {
borderWidth : 0
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'line',
lineStyle : {
color : '#0f0',
width : 2,
type : 'solid'
}
}
},
// x轴
xAxis : [ {
type : 'category',
axisTick : {
show : false
},
splitLine : {
lineStyle : {
type : 'dotted'
}
}
} ],
// y轴
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value}件'
},
splitLine : {
lineStyle : {
type : 'dotted'
}
}
} ],
// 数值序列
series : [ {
name : '销量',
type : 'line',
itemStyle : {
normal : {
color : '#f00',
lineStyle : {
width : 2
},
label : {
show : true,
position : 'right',
textStyle : {
fontStyle : 'bolder',
fontSize : 15
}
}
}
},
symbol : 'emptyCircle',
symbolSize : 4,
} ]
};
// 事件的参数中包括：数据在序列中的下标dataIndex，数据的值value，x轴上的名称name
function eConsole(param) {
if (typeof param.seriesIndex == 'undefined') {
return;
}
if (param.type == 'click') {
var mes = param.name + ':' + param.value;
document.getElementById('info').innerHTML = mes;
}
}
});
</script>
</body>
</html>服务端的servlet如下，这种小东西还写的不熟练：获取文件路径，设置UTF-8编码，关闭流等操作还不够轻车熟路
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
response.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String fullPath = this.getServletContext().getRealPath("/") + "data"
+ File.separator + name;
PrintWriter out = null;
BufferedReader br = null;
try
{
out = response.getWriter();
br = new BufferedReader(new FileReader(fullPath));
String str = null;
while ((str = br.readLine()) != null)
{
out.print(str);
}
out.flush();
}
finally
{
if (br != null)
{
br.close();
}
// 即使自己不关闭，tomcat等容器也会关闭
if (out != null)
{
out.close();
}
}
}服务端返回的数据一定要是标准格式的json。标准是指用双引号，不用单引号。另外，最后一个键值对后面不要有逗号，IE8中不允许JavaScript代码中的json采用这种不规范的写法，FireFox容许。
{
"title" : "销量和进货量",
"category" : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ],
"value" : [ 5, 20, 40, 10, 10, 20 ]
}如果在图表已经加载过数据之后，想要换一组数据，可以用getOption方法得到一份option的深拷贝，然后把其中的数据改掉，再调用setOption方法就可以：
var newOption = myChart.getOption(); // 深拷贝 newOption.xAxis[0].data = newData.category; newOption.series[0].data = newData.value; myChart.setOption(newOption,true); // 第二个参数表示不和原先的option合并
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《pro Spring》学习笔记之Quartz的cronTrigger使用
- 学习笔记,VB.NET使用DirectSound9 (2) 声音的特性
- 《struts2权威指南》学习笔记之使用拦截器完成权限控制
- 《Win32多线程程序设计》学习笔记 第8章 使用C Run-time Library
- 怎样使用TKPROF工具——《Oracle高效设计》学习笔记
- 《Win32多线程程序设计》学习笔记 第9章 使用C++
- 《struts2权威指南》学习笔记之在Freemarker中使用struts2标签
- set /list/ map 使用 学习笔记
- 学习笔记---Javascript原型对象、this的5钟用法、原型继承、Caller和Callee的使用
- 《Pro Spring》学习笔记之使用properties文件进行依赖注入
- 《pro Spring》学习笔记之使用Spring+James邮件服务器发送普通HTML邮件
- 《pro Spring》学习笔记之使用Sprin+James邮件服务器发送复杂类型邮件
- 学习笔记-- 使用System.Text.StringBuilder的方法和属性
- 《pro Spring》学习笔记之使用Spring+James邮件服务器发送内嵌图片的HTML邮件
- 《Pro Spring》学习笔记之beanFactory的嵌套使用
- 学习笔记:怎样使用session
- 《pro Spring》学习笔记之使用Spring+James邮件服务器发送普通文本邮件
- 学习笔记》ADO.NET》在ADO.NET中使用DataSet
- 《Visual C++入门经典》学习笔记二(使用MFC编写Windows程序)
- 《软件调试的艺术》学习笔记——GDB使用技巧摘要(1)