近期做报表时用到了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>
时间： 2024-11-05 22:34:59