Echarts图表
近期做报表时用到了Echarts图表，因为从前只用过JfreeChart，两者一比较感觉百度做的确实厉害，功能很强大，要是很多。
最近主要用到了，柱状图，折线图，混合图，南丁格尔玫瑰图，桑基图。
有兴趣可以到其官网看，上面讲的非常详细。http://echarts.baidu.com/index.html；
官网API地址：http://echarts.baidu.com/option.html#title
1.柱状图，折线图，混合图
下面代码是实际项目中的用法，具体属性就不多说了，到上面网址去看。最主要的就是数据格式。
图例：data:['蒸发量','降水量','平均温度']；
默认图例显示：selected:['平均温度':false];
后台查询字段：data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
数据: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]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
其实我建议大家到官网看看文档，我这也是粗略写一下，因为用的少，以后自己看的时候有地方找，主要还是上面的网址管用。。。
/**charts图*/ function charts(id,url,ny,jgdmQL){ $("#chart_"+id).html(""); var str=checkValue(id); var startDate=$("#startYear").val()+$("#startMonth").val(); var endDate=$("#endYear").val()+$("#endMonth").val(); var myChart = echarts.init(document.getElementById("chart_"+id)); myChart.showLoading({text:"图表数据正在努力加载..."}); $.post(url,{"str":str,"startDate":startDate,"endDate":endDate,"ny":ny,"jgdmQL":jgdmQL},function(result){ var tuLi=eval("("+result.tuLi+")"); var moRen=eval("("+result.moRen+")"); var nm=eval("("+result.nm+")"); var da=eval("("+result.chart+")"); var option = { tooltip: { trigger: 'axis' }, toolbox:{ show:true, feature:{ saveAsImage:{ show:true }, dataView:{ show:true, readOnly:false }, restore:{ show:true }, magicType:{ show:true, type:["line","bar"] } } }, legend: { data:tuLi,//动态图例 selected:moRen//初始图例是否显示 }, grid:{ y:165 }, xAxis: [ { type: 'category', axisLabel:{ interval:0, rotate:20 }, data: nm//后台查询字段对象 } ], yAxis: [ { type: 'value', name: '金额/万元', axisLabel: { formatter: '{value}' } }, { type: 'value', name: '增幅/%', axisLabel: { formatter: '{value}' } }, ], series: da//数据 }; myChart.setOption(option); myChart.hideLoading(); },"json") }
2.桑基图。这个图就有点麻烦，其描述的是，从初始状态至最终形态的变化过程。
name是节点，links是变化过程。
{ target: '张店',source: '淄_博_增_长_比_%',value:10}：表示：张店有10变为了淄_博_增_长_比_%
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>桑基图</title> <%@include file="../public.jsp"%> <script type="text/javascript" src="../../js/charts/charts.common.extend.js"></script> <script type="text/javascript"> function format(v){ // 格式化矩形框内显示的文字，如需要换行矩形框内的数据name节点需要添加下滑线_,如桑_基_图,这种格式的文字才可以垂直显示 var name = v.name; if(name.indexOf('_') > -1){ var str = ''; var strArr = name.split('_'); for (var i = 0; i < strArr.length;i++) { str += strArr[i] + '\n'; } return str; } } function toolTipformat(v){ // 转化工具提示栏中的文字，默认写法无需修改 alert(v); var name = v.name; if(name.indexOf('_') > -1){ var str = ''; var strArr = name.split('_'); for (var i = 0; i < strArr.length;i++) { str += strArr[i]; } return str; }else{ return v.name; } } $(function(){ var option = { title: { text: '' }, tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'sankey', width:'40%', nodeWidth:50, data:[{ name:'淄_博_收_入_额', value:0, label:{//该矩形节点中文本标签的样式 normal:{//常规样式 textStyle:{fontSize:16,color:'black',fontWeight:'bold'} }/*, emphasis:{//着重突出的样式 textStyle:{ fontSize:16, color:'black', fontWeight:'bold' } }*/ }, itemStyle:{//矩形节点的样式 normal:{shadowColor:'#FF9900',color:'#FF9900'} } }, {name: '张店',value: 10,label:{normal:{position: 'insideRight'}}}, {name: '临淄',value: 20,label:{normal:{position: 'insideRight'}}}, {name: '博山', value: 20,label:{normal:{position: 'insideRight'}}}, {name: '周村',value: 10,label:{normal:{position: 'insideRight'}}}], links:[{ source: '张店',target: '淄_博_收_入_额',value:10}, {source: '临淄',target: '淄_博_收_入_额',value:20}, { source: '博山', target: '淄_博_收_入_额',value:20}, {source: '周村',target: '淄_博_收_入_额',value:10}], label:{//描述每个矩形节点中文本的样式 normal:{ position: 'inside',//在矩形节点内部 formatter:function(v){ return format(v) } } }, itemStyle: {//描述每个矩形节点的样式 normal: {//常规的 opacity: 0.6, color:'#FFFF00', borderWidth: 0, shadowColor:'#FFFF00' } }, lineStyle: {//矩形节点之间连线的样式 normal: { opacity:0.6, color:'#FFFF00', shadowColor:'#FFFF00' } }, tooltip:{//本系列特定的提示信息 formatter:function(v){ return toolTipformat(v); } } }, { type: 'sankey', width:'40%', left:'46%', nodeWidth:50, data:[{ name:'淄_博_增_长_比_%', value:0, label:{//该矩形节点中文本标签的样式 normal:{//常规样式 textStyle:{fontSize:16,color:'black',fontWeight:'bold'} }/*, emphasis:{//着重突出的样式 textStyle:{ fontSize:16, color:'black', fontWeight:'bold' } }*/ }, itemStyle:{//矩形节点的样式 normal:{shadowColor:'#009900',color:'#009900'} } }, {name: '张店',value: 10,label:{normal:{position: 'insideLeft'}}}, {name: '临淄',value: 20,label:{normal:{position: 'insideLeft'}}}, {name: '博山', value: 20,label:{normal:{position: 'insideLeft'}}}, {name: '周村',value: 10,label:{normal:{position: 'insideLeft'}}}], links:[{ target: '张店',source: '淄_博_增_长_比_%',value:10}, {target: '临淄',source: '淄_博_增_长_比_%',value:20}, { target: '博山', source: '淄_博_增_长_比_%',value:20}, {target: '周村',source: '淄_博_增_长_比_%',value:10}], label:{//描述每个矩形节点中文本的样式 normal:{ position: 'inside',//在矩形节点内部 formatter:function(v){ return format(v) } } }, itemStyle: {//描述每个矩形节点的样式 normal: {//常规的 opacity: 0.6, color:'#00FF00', borderWidth: 0, shadowColor:'#00FF00' } }, lineStyle: {//矩形节点之间连线的样式 normal: { opacity:0.6, color:'#00FF00', shadowColor:'#00FF00' } }, tooltip:{//本系列特定的提示信息 formatter:function(v){ return toolTipformat(v); } } } ] }; var myChart = echarts.init(document.getElementById("aa")); myChart.setOption(option); }) </script> </head> <body> <div id="aa" style="width: 100%;height: 100%"></div> </body> </html>
