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

最新推荐文章于 2023-02-16 17:20:35 发布

color007

最新推荐文章于 2023-02-16 17:20:35 发布

阅读量9.6k

点赞数 3

分类专栏： js和css 文章标签： Ecahrts 报表 json 地图报表

本文链接：https://blog.csdn.net/color007/article/details/43276765

版权

js和css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用百度的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，这样很方便！