<%@ page language="java" contentType="image/pngcharset=GBK" pageEncoding="GBK"
import="java.awt.*, javax.imageio.*,java.awt.geom.*,java.awt.image.*"%>
<%!// 绘制饼图的说明
public void drawTips(String tips, Color color, Arc2D.Double arc2d, Graphics2D g2d) {
Arc2D.Double position = arc2d
position.setAngleExtent(arc2d.getAngleExtent() / 2)
position.x = arc2d.x - 15
position.y = arc2d.y - 15
position.width = arc2d.getWidth() + 50
position.height = arc2d.getHeight() + 50
Point2D.Double endPoint = (Point2D.Double) position.getEndPoint()
g2d.setPaint(color)
int stringLength = g2d.getFontMetrics().stringWidth(tips)
if (endPoint.x <= arc2d.getCenterX())
g2d.drawString(tips, (float) endPoint.x - stringLength,
(float) endPoint.y)
else {
g2d.drawString(tips, (float) endPoint.x, (float) endPoint.y)
}
}
%>
<%
// 清空缓冲区
response.reset()
// 注意这里的MIME类型
response.setContentType("image/png")
// 创建一个 500X375 的图像
int width = 500, height = 375
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB)
// 创建Java2D对象
Graphics2D g2d = image.createGraphics()
// 填充整个背景
g2d.setPaint(Color.WHITE)
g2d.fillRect(0, 0, width, height)
// 绘制阴影，由灰色渐进圆角矩形组成
GradientPaint grayGP = new GradientPaint(0, 0, Color.GRAY, width,
height, new Color(218, 214, 212), false)
g2d.setPaint(grayGP)
RoundRectangle2D.Float bgRR = new RoundRectangle2D.Float(5, 5,
width - 5, height - 5, 50, 50)
g2d.fill(bgRR)
// 绘制渐进蓝色圆角矩形背景
GradientPaint blueGP = new GradientPaint(0, 0, new Color(252, 197,
113), width / 2, height / 2, new Color(255, 255, 169), true)
g2d.setPaint(blueGP)
g2d.fillRoundRect(0, 0, width - 5, height - 5, 50, 50)
// 绘制深蓝色圆角矩形轮廓
BasicStroke bs = new BasicStroke(1.2f)
g2d.setStroke(bs)
g2d.setPaint(new Color(55, 71, 105))
g2d.drawRoundRect(0, 0, width - 5, height - 5, 50, 50)
// 绘制图表标题
//String chartTitle = "客户构成分析"
g2d.setColor(Color.BLACK)
g2d.setFont(new Font("宋体", Font.PLAIN, 30))
//int stringLength = g2d.getFontMetrics().stringWidth(chartTitle)
//g2d.drawString(chartTitle, (width - stringLength) / 2, 30)
// 定义圆弧
Arc2D.Double arc2d = new Arc2D.Double()
double startAngle = 30.0, arcAngle = 0.0
double rectWidth = 295.0, rectHeight = 245.0
Point2D.Double p2d = new Point2D.Double((width - rectWidth) / 2, 70.0)
int arcType = Arc2D.PIE
Color color[] = new Color[5]
color[0] = new Color(99, 99, 0)
color[1] = new Color(255, 169, 66)
color[2] = new Color(33, 255, 66)
color[3] = new Color(33, 0, 255)
color[4] = new Color(255, 0, 66)
double bookSales[] = new double[5]
double totalSales = 0.0
// 定义厚度
int thickness = 25
for (int i = 0i <bookSales.lengthi++) {
bookSales[i] = 1 + Math.random() * 99
totalSales += bookSales[i]
}
// 绘制起始角度不大于90度的圆弧
startAngle = 30
for (int i = 0i <bookSales.lengthi++) {
arcAngle = bookSales[i]
if (startAngle >= 90) {
break
}
for (int j = thicknessj >0j--) {
g2d.setColor(color[i].darker())
arc2d = new Arc2D.Double(p2d.x, p2d.y + j, rectWidth,
rectHeight, startAngle, arcAngle, arcType)
// 填充圆弧
g2d.fill(arc2d)
}
// 更新圆弧的起始角度
startAngle += arcAngle
}
// 绘制起始角度不小于270度的圆弧
startAngle = 390
for (int i = bookSales.length - 1i >0i--) {
arcAngle = bookSales[i]
if (startAngle <= 270) {
break
}
for (int j = thicknessj >0j--) {
g2d.setColor(color[i].darker())
arc2d = new Arc2D.Double(p2d.x, p2d.y + j, rectWidth,
rectHeight, startAngle, -arcAngle, arcType)
// 填充圆弧
g2d.fill(arc2d)
}
// 更新圆弧的起始角度
startAngle -= arcAngle
}
// 绘制起始角度在90度到270度之间的圆弧
startAngle = 30
for (int i = 0i <bookSales.lengthi++) {
arcAngle = bookSales[i]
if (startAngle >90 &&startAngle <270) {
for (int j = thicknessj >0j--) {
g2d.setColor(color[i].darker())
arc2d = new Arc2D.Double(p2d.x, p2d.y + j, rectWidth,
rectHeight, startAngle + arcAngle, -arcAngle,
arcType)
// 填充圆弧
g2d.fill(arc2d)
}
}
// 更新圆弧的起始角度
startAngle += arcAngle
}
// 绘制最上面一层圆弧
startAngle = 30
for (int i = 0i <bookSales.lengthi++) {
arcAngle = bookSales[i]//item.getPercent() * 3.6
g2d.setColor(color[i])
arc2d = new Arc2D.Double(p2d.x, p2d.y, rectWidth, rectHeight,
startAngle, arcAngle, arcType)
// 填充圆弧
g2d.fill(arc2d)
// 描绘圆弧轮廓
g2d.setStroke(new BasicStroke(1.2f))
g2d.setPaint(Color.GRAY)
g2d.draw(arc2d)
// 更新圆弧的起始角度
startAngle += arcAngle
g2d.setFont(new Font("宋体", Font.PLAIN, 12))
}
// 部署图形
g2d.dispose()
// 利用ImageIO类的write方法对图像进行编码
ServletOutputStream sos = response.getOutputStream()
ImageIO.write(image, "PNG", sos)
sos.close()
out.clear()
out = pageContext.pushBody()
%>
首先要把echarts所需的js和swf文件导入进去
//后台拼图标所需xmlStringBuffer outXml = new StringBuffer()//任务列表xml字符串
@Action("/task/loadMyTaskPercentXml")
public String loadMyTaskPercentXml()
{
HttpServletResponse res = ServletActionContext.getResponse()
res.setHeader("Cache-Control", "no-store")
res.setHeader("Pragma", "no-cache")
res.setDateHeader("Expires", 0)
res.setContentType("text/xmlcharset=GBK")
PrintWriter out = res.getWriter()
StringBuffer outXml = new StringBuffer(
"<?xml version=\"1.0\" encoding=\"GBK\"?>\n")
outXml
.append("<chart baseFontSize=\'12\' caption=\'任务统计\' subcaption=\'\' yAxisMinValue=\'51650.1\' yAxisMaxValue=\'71118.3\' xaxisname=\'日期\' yaxisname=\'数量\' hovercapbg=\'FFECAA\' hovercapborder=\'F47E00\' formatNumberScale=\'0\' decimalPrecision=\'0\' showvalues=\'1\' numdivlines=\'10\' numVdivlines=\'0\' shownames=\'1\' rotateNames=\'1\'>")
outXml.append("\n")
outXml.append("<set name=\'已完成任务(%)")
outXml.append("\' value=\'" + s1.replace("%", "") + "")
outXml.append("\' />")
outXml.append("\n")
outXml.append("<set name=\'未完成任务(%)")
outXml.append("\' value=\'" + s2.replace("%", "") + "")
outXml.append("\' />")
outXml.append("\n")
outXml.append("</chart>\n")
out.print(outXml.toString())
out.flush()
out.close()
return null
}
在后台进行拼装xml，并且返回到页面
<div style="display:none" id="taskListGraph">${outXml}</div>
<script type="text/javascript">
var text= document.getElementById("taskListGraph").innerHTML
var chart2 = new FusionCharts("${base}/swf/Bar2D.swf?ChartNoDataText=暂无数据&XMLLoadingText=正在载入数据，请稍候", "chart02", "610", "276")
chart2.setDataXML(text)
chart2.render('jdbox')
chart2.addParam("wmode", "Opaque")
</script>
这样图就生成好了！
