Echarts插件的使用

最新推荐文章于 2022-12-21 15:22:55 发布

CarlosXu14

最新推荐文章于 2022-12-21 15:22:55 发布

阅读量199

点赞数

分类专栏：编程语言 Java servlet ajax jsp

本文链接：https://blog.csdn.net/qq_43459184/article/details/96839998

版权

编程语言同时被 3 个专栏收录

78 篇文章 1 订阅

订阅专栏

Java

60 篇文章 1 订阅

订阅专栏

servlet

9 篇文章 0 订阅

订阅专栏

下载地址

https://echarts.baidu.com/download.html
因为echarts常常需要用到ajax请求，所以同时需要jquery
在这里插入图片描述

使用echarts实现数据可视化：
使用ajax请求向后端请求数据，根据请求的数据画图

<%@ 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>
    <base href="<%=basePath%>">
    
    <title>My JSP 'paymentstatic.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.ajax({
				url:"servlet/InOutServlet?method=getPieData",
				type:"POST",
				dataType:"text",
				success:function(data){
					eval("var arr="+data);
					var dom = document.getElementById("container");
					var myChart = echarts.init(dom);
					var option = {
					    title : {
					        text: '支出信息统计',
					        subtext: '报销统计',
					        x:'center'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient: 'vertical',
					        left: 'left',
					        data: ['1','2','3','4','5']
					    },
					    series : [
					        {
					            name: '访问来源',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            data:arr,
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					};
					;
					if (option && typeof option === "object") {
					    myChart.setOption(option, true);
					}
				}
			});
			
					
		});
	</script>
  </head>
  
  <body>
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="container" style="height: 100%"></div>
  </body>
</html>

使用servlet实现向前台传递数据：


	@Override
	public String getPieData(int type) {
		//调用DAO层获取支出入数据（List）
		PaymentDao  pmDao = new PaymentDaoImpl();
		List<Object []> list = pmDao.findStaticsData(type);
		
//		String jsonStr = "[{value:345, name:'直接访问'},{value:310, name:'邮件营销'},"
//		+ "{value:234, name:'联盟广告'},{value:135, name:'视频广告'},"
//		+ "{value:1548, name:'搜索引擎'}]";
		//将List转换成jsonStr 		
		StringBuilder jsonStr =new StringBuilder("[");
		for(int i=0;i<list.size();i++){
			Object [] arr = list.get(i);
			jsonStr.append("{");
			jsonStr.append("\"value\":"+arr[1]+",");
			jsonStr.append("\"name\":\""+arr[0]+"\"");
			
			if(i<list.size()-1){
				jsonStr.append("},");
			}else{
				jsonStr.append("}");
			}
			
		}
		jsonStr.append("]");
		
		//返回jsonStr
		return jsonStr.toString();
	}

因为Echarts进行数据解析时需要的格式是json格式的，所以这里采用的是手动将List集合中的数据拼接成json字符串。可以使用第三方工具转换成json格式的字符串，这里我就提供一个转换类，大家有兴趣的可以考虑使用。

package com.commons;

import java.util.List;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * JSON转换工具类
 */
public class JsonUtils {

    // 定义jackson对象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 将对象转换成json字符串。
     * <p>Title: pojoToJson</p>
     * <p>Description: </p>
     * @param data
     * @return
     */
    public static String objectToJson(Object data) {
    	try {
			String string = MAPPER.writeValueAsString(data);
			return string;
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		}
    	return null;
    }
    
    /**
     * 将json结果集转化为对象
     * 
     * @param jsonData json数据
     * @param clazz 对象中的object类型
     * @return
     */
    public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
        try {
            T t = MAPPER.readValue(jsonData, beanType);
            return t;
        } catch (Exception e) {
        	e.printStackTrace();
        }
        return null;
    }
    
    /**
     * 将json数据转换成pojo对象list
     * <p>Title: jsonToList</p>
     * <p>Description: </p>
     * @param jsonData
     * @param beanType
     * @return
     */
    public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
    	JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
    	try {
    		List<T> list = MAPPER.readValue(jsonData, javaType);
    		return list;
		} catch (Exception e) {
			e.printStackTrace();
		}
    	
    	return null;
    }
    
}

CarlosXu14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts插件的使用

下载地址https://echarts.baidu.com/download.html因为echarts常常需要用到ajax请求，所以同时需要jquery使用echarts实现数据可视化：使用ajax请求向后端请求数据，根据请求的数据画图<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&...
复制链接

扫一扫