您的位置：首页 > 其它

Echarts图简单开发

2017-11-10 10:32 78 查看
听同事说Echarts这个东西要去做数据统计，动态图蛮好用的，就简单研究一下：

Echarts兼容性：IE6/7/8/9/10/11，chrome，firefox，Safari等；

Echarts使用时直接引入一个js文件就可以了；

Echarts（折线图 、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图）等12类图表；

Echarts（标题，详情气泡、图例、值域、数据区域、时间轴、工具箱）等7个可交互组件，支持多图表、组件的联动和混搭展现；

下面就开始吧：

//数据库中查出需要的数据
List<Blood_Data> data = usertService.weekreport(number);
List<String> datelist  = new ArrayList<String>();
List<BigDecimal> decimallist  = new ArrayList<BigDecimal>();
for (Blood_Data list : data) {
BigDecimal a = list.getBloodsugar();
Date b = list.getDatetime();
String c = format.format(b);
//分别装到两个list中返回jsp页面
datelist.add(c);
decimallist.add(a);
}
request.setAttribute("datelist", datelist);
request.setAttribute("decimallist", decimallist);
return "week";


正常的数据库中查到需要的数据回到前台jsp页面

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我是周报</title>
<link href="<%=request.getContextPath()%>/CSS/art.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src="<%=request.getContextPath()%>/JS/echarts.js"></script>
<script type="application/javascript" src="<%=request.getContextPath()%>/JS/jquery1.9.0.min.js"></script>
</head>


首先在tittle下引上我们需要的Echarts的js文件；

顺便引个jquery；

<body>
<div id="content">
<div align="center">
<div id="main" style="width: 100%; height: 600%"></div>
</div>
<input type="hidden" id="list1" value="${datelist}"> <input
type="hidden" id="list2" value="${decimallist}">
<!--            这里分别用两个list接到后台的返回值 -->
<script type="application/javascript" src="<%=request.getContextPath()%>/JS/macarons.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var list = $("#list1").val();
list = list.substring(1, list.length).substring(0, list.length - 2).split(',');

var list2 = $("#list2").val();
list2 = list2.substring(1, list2.length).substring(0,list2.length - 2).split(',');
var str2 = [];
for (var j = 0; j < list2.length; j++) {
var jn2 = list2[j];
var jn3 = parseFloat(jn2);
str2.push(jn3);
}
<!--    分别提供给echarts需要的两个list -->
// echar图样式
$(function() {
var myChart = echarts.init(document.getElementById("main"));
option = {
title : {
left:'10%',
text : '您的血糖周报分析',
textStyle:{
//文字颜色
color:'#000',
//字体风格,'normal','italic','oblique'
fontStyle:'italic',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bolder',
//字体系列
fontFamily:'sans-serif',
//字体大小
fontSize:35
}
},
tooltip : {
trigger : 'axis'
},
legend: {    //图表上方的类别显示
orient: 'vertical',
show:true,
data:['您的血糖值']
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel :{
interval:0
},
boundaryGap : false,
data : list

} ],
yAxis : [ {
type : 'category',
boundaryGap : false,
data : [ "0.0mol/L", "1.0mol/L", "2.0mol/L",
"3.0mol/L", "4.0mol/L", "5.0mol/L", "6.0mol/L",
"7.0mol/L", "8.0mol/L", "9.0mol/L", "10.0mol/L"]
} ],

series : [ {
name : '您的血糖值',
type : 'line',
symbol:'star',//拐点样式
symbolSize: 8,//拐点大小
itemStyle : {
normal : {
lineStyle:{
width:3,//折线宽度
color:"#FF4500"//折线颜色
}
}
},
// areaStyle: {normal: {}},
data : str2,
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}

} ]
};

myChart.setOption(option);
});
</script>
</div>
</body>


然后是效果图：



下面详细说下从echarts图样式每一个option的作用：

首先是tittle：

left:10%跟CSS样式差不多，可以自定义10%，100px都OK

text：主标题

subtext：副标题

其他的要的什么风格自己定义就好啦。

title : {
left:'10%',
text : '您的血糖周报分析',
//subtext: '乌拉乌拉乌拉',
textStyle:{
//文字颜色
color:'#000',
//字体风格,'normal','italic','oblique'
fontStyle:'italic',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bolder',
//字体系列
fontFamily:'sans-serif',
//字体大小
fontSize:35
}
},


然后是tooltip：

当trrigger是axis时，显示的是当前数据纵坐标的数据



当trigger是item时，显示的是坐标点的一个数据

tooltip : {
trigger : 'axis'
},


然后是legend：

就是这个：



data中填入series中的name就会默认显示在jsp页面的顶端

legend: {    //图表上方的类别显示
orient: 'vertical',
show:true,
data:['您的血糖值']
},


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
}
}
},


然后是xAxis，yAxis

分别填入x坐标和y坐标的数据，我分别填入上面处理的list和自定义数据

xAxis : [ {
type : 'category',
axisLabel :{
interval:0
},
boundaryGap : false,
data : list

} ],
yAxis : [ {
type : 'category',
boundaryGap : false,
data : [ "0.0mol/L", "1.0mol/L", "2.0mol/L",
"3.0mol/L", "4.0mol/L", "5.0mol/L", "6.0mol/L",
"7.0mol/L", "8.0mol/L", "9.0mol/L", "10.0mol/L"]
} ],


最后就是series：

可以自定义拐点，在markpoint设置最大值和最小值，markline设置平均值

series : [ {
name : '您的血糖值',
type : 'line',
symbol:'star',//拐点样式
symbolSize: 8,//拐点大小
itemStyle : {
normal : {
lineStyle:{
width:3,//折线宽度
color:"#FF4500"//折线颜色
}
}
},
// areaStyle: {normal: {}},
data : str2,
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}

} ]
};


最后。。。。就可以了。。

myChart.setOption(option);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  echarts-地图
相关文章推荐
新的分享
章节导航