您的位置：首页 > 数据库

Echarts地图报表，从数据库获取数据，json传值

2015-01-29 20:17 393 查看

使用百度的Echarts插件做报表：

下载地址：百度Echats下载

文档地址：文档地址

效果：

<html>代码：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>各省市访问数量分布</title>
<script type="text/javascript" src="${basePath}/js/jquery-1.11.1.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="height:400px;width:900px"></div>
<script type="text/javascript">
var datas;
$(function(){

// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
myChart.showLoading({
text: '正在努力的读取数据中...',    //loading话术
});
$.ajax({
type:"post",
url:"listArea",
async:false,
success:function(dataJson){
datas=dataJson;
//alert(datas["北京市"]);
}
});
myChart.hideLoading();

var option = {
title : {
text: '全国各省访问数量',
subtext: '总数量',
x:'center'
},
tooltip : {
trigger: 'item'
},

dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'],           // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},

series : [
{
name: '访问量',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: datas["北京市"]},
{name: '天津',value: datas["天津市"]},
{name: '上海',value: datas["上海市"]},
{name: '重庆',value: datas["重庆市"]},
{name: '河北',value: datas["河北"]},
{name: '河南',value: datas["河南"]},
{name: '云南',value: datas["云南"]},
{name: '辽宁',value: datas["辽宁"]},
{name: '黑龙江',value: datas["黑龙江"]},
{name: '湖南',value: datas["湖南"]},
{name: '安徽',value: datas["安徽"]},
{name: '山东',value: datas["山东"]},
{name: '新疆',value: datas["新疆"]},
{name: '江苏',value: datas["江苏"]},
{name: '浙江',value: datas["浙江"]},
{name: '江西',value: datas["江西"]},
{name: '湖北',value: datas["湖北"]},
{name: '广西',value: datas["广西"]},
{name: '甘肃',value: datas["甘肃"]},
{name: '山西',value: datas["山西"]},
{name: '内蒙古',value: datas["内蒙古"]},
{name: '陕西',value: datas["陕西"]},
{name: '吉林',value: datas["吉林"]},
{name: '福建',value: datas["福建"]},
{name: '贵州',value: datas["贵州"]},
{name: '广东',value: datas["广东"]},
{name: '青海',value: datas["青海"]},
{name: '西藏',value: datas["西藏"]},
{name: '四川',value: datas["四川"]},
{name: '宁夏',value: datas["宁夏"]},
{name: '海南',value: datas["海南"]},
{name: '台湾',value: datas["台湾"]},
{name: '香港',value: datas["香港"]},
{name: '澳门',value: datas["澳门"]}
]
}

]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);

});

</script>
</body>
</html></span>

服务器端：

action：

package com.tm.admin.stat.action;

import java.util.List;
import java.util.TreeMap;

import net.sf.json.JSONArray;

import org.apache.struts2.json.JSONException;
import org.apache.struts2.json.JSONUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.tm.admin.stat.Option;
import com.tm.admin.stat.service.ISystemStatService;
import com.tm.core.action.TmBaseAction;
import com.tm.core.annotation.TmAnnotationClass;

@TmAnnotationClass(model="stat",name="统计管理")
@Scope("prototype")
@Controller("admin.testAction")
public class TestAreaAction extends TmBaseAction{
@Autowired
private ISystemStatService service;

public String testArea() {//第一次进入页面
return "testArea";//返回到testArea页面
}

public void listArea() throws JSONException{
TreeMap<String, Integer> map=service.findAreaCounts();
outputStr(JSONUtil.serialize(map));

}
}

数据库查询 dao：

public TreeMap<String, Integer> findAreaCounts(){
List<Option> list=new ArrayList<Option>();
String sql="select country,count(1) from tm_stat  GROUP BY country";
List<Object[]> objects=getSession().createSQLQuery(sql).list();
TreeMap<String, Integer> map = null;
if(objects!=null && objects.size()>0){
map = new TreeMap<String, Integer>();
for (int i = 0; i < objects.size(); i++) {
Object[] objs = objects.get(i);
map.put(String.valueOf(objs[0]), Integer.parseInt(String.valueOf(objs[1])));
}
}
return map;

}

==================================================================================================================================

注意返回Map<String,Integer> ,不要使用 List<Object>

map转换成json时是这样的： [{"湖南":"30","福建":"40","江苏":"50" }] 转换后这是一个json对象

假如新建一个键值对类：

Option ： String name; Integer value;

返回时List<Option>

list转换成json时是这样的： [{"name":"湖南","value":"30"},{"name":"福建","value":"40"},{"name":"江苏","value":"50"}]

转换后是json对象的数组

===================================================================================

返回的json 后调用，如果是list类型的json，则需要for(key in data)遍历json对象数组key 和data[key]是数据，或者data[0].name和data[0].value是数据

如果是map类型的，则可以通过 data["湖南"] 查找到对应的值 30，这样很方便！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航