echats图表插件

最新推荐文章于 2024-05-08 21:30:00 发布

w_t_y_y

最新推荐文章于 2024-05-08 21:30:00 发布

阅读量475

点赞数

分类专栏：前端常用插件

本文链接：https://blog.csdn.net/w_t_y_y/article/details/78605274

版权

前端常用插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

饼图实例，

步骤：

1、首先导入echats的相关包，这里echats只有一个js包echarts.min.js。

2、前台：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="assets/js/echarts.min.js"></script>
<script src="assets/jquery.min.js"></script>
<style>
body {
	margin: 0px;
}

.container {
	width: 1130px;
	height: 600px;
}

.nav {
	width: 100%;
	height: 20%;
	border: 1px solid gray;
	box-sizing: border-box;
	text-align: center;
}

</style>
</head>
<body>
<div class="contaner">
			<div class="nav">
				<h1>故障分类统计</h1>
			</div>
			


	<div id="main" style="width: 700px; height: 400px;"></div>
	</div><script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		$.post('countc').done(function(data) {
			
			var js=JSON.parse(data);
			myChart.setOption({
				
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b} : {c} ({d}%)"
				},
				/* legend : {
					orient : 'vertical',
					left : 'left',
					data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]
				}, */
				series : [ {
					//name : '访问来源',
					type : 'pie',
					radius : '55%',
					center : [ '50%', '60%' ],
					data : js,
					itemStyle : {
						emphasis : {
							shadowBlur : 10,
							shadowOffsetX : 0,
							shadowColor : 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
				
				

			});
		});
		
		// 使用刚指定的配置项和数据显示图表。
		// myChart.setOption(option);
	</script>
</body>
</html>

重点是后台数据的获取：

观察饼图的数据结构：

中括号代表数组，后台用ArrayList集合表示，大括号代表对象，所以这个集合里面存放的是对象，且这个对象的字段为value和name。下面自定义一个对象：

package com.ifytek.domain;

public class CClassfiy {
	private Integer value;
	private String name;

	public int getValue() {
		return value;
	}

	public void setValue(int value) {
		this.value = value;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}

后台：

package com.ifytek.controller;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.ifytek.domain.CClassfiy;
import com.ifytek.service.EquipService;

@WebServlet("/countc")
public class CountClassfiyServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.getRequestDispatcher("/WEB-INF/jsp/countc.jsp").forward(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		EquipService service=new EquipService();
		ArrayList<CClassfiy> list=service.getClassfiyList();
		String jsonlist=JSON.toJSONString(list,true);
		System.out.println("jsonlist:"+jsonlist);
		resp.getWriter().write(jsonlist);
	}
}

看下这个service里面的相关方法：

public ArrayList<CClassfiy> getClassfiyList() {
		ArrayList<CClassfiy> list=new ArrayList<>();
		EquipDao dao=new EquipDao();
		ResultSet resultSet=dao.getClassfiyList();
		try {
			while(resultSet.next()){
				int value=resultSet.getInt("v");
				String name=resultSet.getString("n");
				CClassfiy cClassfiy=new CClassfiy();
				
				cClassfiy.setValue(value);
				cClassfiy.setName(name);
				list.add(cClassfiy);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}

dao:

public ResultSet getClassfiyList() {
		dbUtil=new DbUtil();
		String sql="select count(*) as v,classfiy as n from equipapply group by classfiy";
		ResultSet resultSet=dbUtil.executeQuery(sql);
		return resultSet;
	}

w_t_y_y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
echats图表插件

饼图实例，步骤：1、首先导入echats的相关包，这里echats只有一个js包echarts.min.js。2、前台：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title herebody { margin:
复制链接

扫一扫