刚接触了柱状图，将自己的一些成果分享一下
实现的效果图如下：
废话就不多说了，代码展示给大家看
后端代码：
public class Monitor {
private Integer id;
private String monitorName;//监测点名称
private String name;//水压、电流、温度
private Integer count1;//水压、电流 告警次数
private Integer count2;//温度 告警次数
}@RequestMapping(value="/findMonitor",produces="application/json;charset=utf-8")
@ResponseBody
public void findMonitor(Monitor monitor,Map<String, Object> map) throws Exception{
List<Monitor> list=monitorService.findMonitor(monitor);
JSONArray jsonArray = JSONArray.parseArray(JSON.toJSONString(list));
response.setCharacterEncoding("UTF-8");
PrintWriter out=response.getWriter();
out.println(jsonArray);
out.flush();
out.close();
}
前端：
<body>
<div id="main"></div>
</body>
<script type="text/javascript">
$(function(){
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line',//需要折线图则加载line模块
'echarts/chart/bar'//使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'),'macarons');
var option = {
title : {
text: '',
subtext: '',
x:'center',
subtarget :'blank',
subtextStyle : {
color :'black',
fontWeight :'normal',
fontSize :'14'
}
},
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend : {
data : ["水压","电流","温度"]
},
calculable : true,
xAxis : [
{
type : 'value',
name : '次'
}
],
yAxis : [
{
type : 'category',
name : '监测点名称',
data : (function(){
var arr = [];
$.ajax({
type : "post",
async : false,//同步执行
url : "url",
data : {},
dataType : "json",
success : function(result){
if(result){
for(var i=0;i<result.length;i++){
arr.push(result[i].monitorName);//监测点名称
}
}
},
error : function(errorMsg){
alert("不好意思，图标请求数据失败！");
myChart.hideLoading();
}
})
return arr;
})()
}
],
series : [
{
name:'水压',
type:'bar',
stack:'次',
barWidth : 20,//柱图宽度
data:(function(){
var arr=[];
$.ajax({
type : "post",
async : false,//同步执行
url : "url",
data : {},
dataType : "json",
success : function(result){
if(result){
for(var i=0;i<result.length;i++){
var name = result[i].name;
if(name == "水压"){
arr.push(result[i].count1);
}else{
arr.push(0);
}
}
}
},
error : function(errorMsg){
alert("不好意思，图标请求数据失败！");
myChart.hideLoading();
}
})
return arr;
})(),
itemStyle : {
normal: {color: 'rgba(157,163,223, 0.8)',
label : {show: true,
position: 'insideRight',
formatter:function(params){
if(params.value>0){
return params.value;
}else{
return '';
}
}
}
}
},
},
{
name:'电流',
type:'bar',
stack:'次',
barWidth : 20,//柱图宽度
data:(function(){
var arr=[];
$.ajax({
type : "post",
async : false,//同步执行
url : "url",
data : {},
dataType : "json",
success : function(result){
if(result){
for(var i=0;i<result.length;i++){
var name = result[i].name;//电流
if(name == "dl"){
arr.push(result[i].count1);
}else{
arr.push(0);
}
}
}
},
error : function(errorMsg){
alert("不好意思，图标请求数据失败！");
myChart.hideLoading();
}
})
return arr;
})(),
itemStyle : {
normal: {color: 'rgba(33,100,150, 0.8)',
label : {show: true,
position: 'insideRight',
formatter:function(params){
if(params.value>0){
return params.value;
}else{
return '';
}
}
}
}
},
},
{
name:'温度',
type:'bar',
stack:'次',
barWidth : 20,//柱图宽度
data:(function(){
var arr=[];
$.ajax({
type : "post",
async : false,//同步执行
url : "url",
data : {},
dataType : "json",
success : function(result){
if(result){
for(var i=0;i<result.length;i++){
arr.push(result[i].count2);
}
}
},
error : function(errorMsg){
alert("不好意思，图标请求数据失败！");
myChart.hideLoading();
}
})
return arr;
})(),
itemStyle : {
normal: {color: 'rgba(100,150,100, 0.5)',
label : {show: true,
position: 'insideRight',
formatter:function(params){
if(params.value>0){
return params.value;
}else{
return '';
}
}
}
}
},
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
})
</script>实现监测点的检测项堆叠展示：
series 中设置相同的 stack:'次' 属性。
以上只是实现了一个简单的统计功能，在此基础上我又添加了条件查询统计功能如下：
<body>
日期：<input name="startTime" value="${startTime }" editable="false"/>---
<input name="endTime" value="${endTime }" editable="false"/>
<input type="button" value="查询" onclick="search(this)"/>
<div id="main"></div>
</body>
<script type="text/javascript">
function search(dom){
var startTime = $('input[name=startTime]').val();
var endTime = $('input[name=endTime]').val();
require(
[
'echarts',
'echarts/chart/line',//需要折线图则加载line模块
'echarts/chart/bar'//使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart=ec.init(document.getElementById('main'),'macarons');
var option = {
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'shadow'
}
},
legend : {
data : ["电流","水压","温度"]
},
calculable : true,
xAxis : [
{
type : 'value',
name : '次'
}
],
yAxis : [
{
type : 'category',
name : '监测点名称',
data : (function(){
var arr = [];
$.ajax({
type : "post",
async : false,//同步执行
url : "controller/findMonitor?startTime="+startTime+"&endTime="+endTime,
data : {},
dataType : "json",
success : function(result){
if(result){
for(var i=0;i<result.length;i++){
r.push(result[i].monitoringname);
}
}
},
error : function(errorMsg){
alert("不好意思，图标请求数据失败！");
myChart.hideLoading();
}
})
return arr;
})()
}
],
series : [
{
name:'水压',
type:'bar',
stack:'次',
barWidth : 20,//柱图宽度
data:(function(){
var arr=[];
$.ajax({
type : "post",
async : false,//同步执行
url : "controller/findMonitor?startTime="+startTime+"&endTime="+endTime,
data : {},
dataType : "json",
success : function(result){
if(result){
for(var i=0;i<result.length-1;i++){
var name = result[i].name;
if(name == "水压"){
arr.push(result[i].count1);
}else{
arr.push(0);
}
}
}
},
error : function(errorMsg){
alert("不好意思，图标请求数据失败！");
myChart.hideLoading();
}
})
return arr;
})(),
itemStyle : {
normal: {color: 'rgba(157,163,223, 0.8)',
label : {show: true,
position: 'insideRight',
formatter:function(params){
if(params.value>0){
return params.value;
}else{
return '';
}
}
}
}
},
},
{
name:'电流',
type:'bar',
stack:'次',
barWidth : 20,//柱图宽度
data:(function(){
var arr=[];
$.ajax({
type : "post",
async : false,//同步执行
url : "controller/findMonitor?startTime="+startTime+"&endTime="+endTime,
data : {},
dataType : "json",
success : function(result){
if(result){
for(var i=0;i<result.length-1;i++){
var name = result[i].name;
if(name == "电流"){
arr.push(result[i].count1);
}else{
arr.push(0);
}
}
}
},
error : function(errorMsg){
alert("不好意思，图标请求数据失败！");
myChart.hideLoading();
}
})
return arr;
})(),
itemStyle : {
normal: {color: 'rgba(33,100,150, 0.8)',
label : {show: true,
position: 'insideRight',
formatter:function(params){
if(params.value>0){
return params.value;
}else{
return '';
}
}
}
}
},
},
{
name:'温度',
type:'bar',
stack:'次',
barWidth : 20,//柱图宽度
data:(function(){
var arr=[];
$.ajax({
type : "post",
async : false,//同步执行
url : "controller/findMonitor?startTime="+startTime+"&endTime="+endTime,
data : {},
dataType : "json",
success : function(result){
if(result){
for(var i=0;i<result.length-1;i++){
arr.push(result[i].count2);
}
}
},
error : function(errorMsg){
alert("不好意思，图标请求数据失败！");
myChart.hideLoading();
}
})
return arr;
})(),
itemStyle : {
normal: {color: 'rgba(100,150,100, 0.5)',
label : {show: true,
position: 'insideRight',
formatter:function(params){
if(params.value>0){
return params.value;
}else{
return '';
}
}
}
}
},
}
],
title : {
text: '',
subtext: '副标题',
x:'center',
subtarget :'blank',
subtextStyle : {
color :'black',
fontWeight :'normal',
fontSize :'14'
}
}
};
// 为echarts对象加载数据
myChart.setOption(option);
//图形点击跳转事件
myChart.on('click',function(params){
var name = params.seriesName;
if(name=='温度'||name=='电流'){
window.location.href="url";
}else if(name=='水压'){
window.location.href="url";
}else if(name=='液位'){
window.location.href="url";
}
})
})
}
</script>还有一些其他的功能，有时间再跟大家分享。。