当前位置：文档之家 › JAVA之struts2+ajax实现echats柱状图

JAVA之struts2+ajax实现echats柱状图

  • 格式：docx
  • 大小：20.74 KB
  • 文档页数：5

下载文档原格式

  / 5

合集下载

Echarts 动态获取数据进行图表展示的Java示例

Echarts 动态获取数据进行图表展示的Java示例

Echarts 动态获取数据进行图表展示的Java示例Echarts官网的demo都采用的数据都是静态数据，本demo是在Echarts官网入门demo的基础上改的，从后台获取数据并展示，供入门参考</div>前端页面代码<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><%String path = request.getContextPath();%><!DOCTYPE html><head><meta charset="utf-8"><title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 800px; height: 300px"></div><!-- ECharts单文件引入 --><script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="build/dist/echarts.js"></script><scriptsrc="/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths : {echarts : 'build/dist'}});// 使用require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载], function(ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main'));var option = {tooltip : {show : true},legend : {data : []},xAxis : [ {type : 'category',data : []} ],yAxis : [ {type : 'value'} ],series : []};$.ajax({type : "POST",url : "gettestdata",dataType : "json",success : function(result) {//将从后台接收的json字符串转换成json对象var jsonobj = eval(result);//给图标标题赋值option.legend.data = jsonobj.legend;//读取横坐标值option.xAxis[0].data = jsonobj.axis;var series_arr = jsonobj.series;//驱动图表生成的数据内容，数组中每一项代表一个系列的特殊选项及数据for (var i = 0; i < series_arr.length; i++) {option.series[i] = result.series[i];}//过渡控制，隐藏loading（读取中）myChart.hideLoading();// 为echarts对象加载数据myChart.setOption(option);}});});</script></body>后台数据封装代码//通过ajax请求数据将请求的数据返回到页面进行图表的显示@RequestMapping("gettestdata")public void getTestData(HttpServletResponse response) {List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "销量"}));List<String> axis = new ArrayList<String>(Arrays.asList(new String[] { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" }));List<Series> series = new ArrayList<Series>();series.add(new Series("销量", "bar", newArrayList<Integer>(Arrays.asList(5, 20, 40, 10, 10, 20))));Echarts echarts = new Echarts(legend, axis, series);response.setContentType("text/html;charset=utf-8");PrintWriter out;try {out = response.getWriter();Gson gson = new Gson();String str = gson.toJson(echarts);System.out.println("str:"+str);out.write(str);out.flush();out.close();} catch (IOException e) { e.printStackTrace(); }}。

通过代码实例跟我学JFreeChart 图表组件——在Java应用程序中创建柱状图的应用实例(Eclipse开发工具版本)

通过代码实例跟我学JFreeChart 图表组件——在Java应用程序中创建柱状图的应用实例(Eclipse开发工具版本)

1.1通过代码实例跟我学JFreeChart 图表组件——在Java应用程序中创建柱状图的应用实例（Eclipse开发工具版本）1.1.1创建柱状图的应用实例1、创建一个简单数据源（dataset）对象的代码示例柱状图的dataset 一般是用CatagoryDataset接口(具体实现类是DefaultCategoryDataset),也会用 IntervalXYDataset接口。

获取一个演示用的简单数据集对象，也可以采用下面的代码来产生CategoryDataset dataset = DatasetUtilities.createCategoryDataset(rowKeys, columnKeys, data)；其中：rowKeys表示X轴数据，columnKeys表示Y轴数据，data表示填充柱状图所要的实际数据（来自于数据库）。

下面为代码示例：private static CategoryDataset getDataSet(){DefaultCategoryDataset dataset = new DefaultCategoryDataset();dataset.addValue(100, "中科院计算所培训中心", "Java软件工程师班");dataset.addValue(200, "中科院计算所培训中心", "软件工程师班");dataset.addValue(300, "中科院计算所培训中心", "平面工程师班");dataset.addValue(400, "中科院计算所培训中心", "网络工程师班");dataset.addValue(500, "中科院计算所培训中心", "动漫工程师班");return dataset;}2、创建组合数据集对象的代码示例private static CategoryDataset getDataSet2() {DefaultCategoryDataset dataset = new DefaultCategoryDataset();dataset.addValue(100, "中科院计算所培训中心", "Java软件工程师班");dataset.addValue(120, "沈阳培训中心", "Java软件工程师班");dataset.addValue(130, "长沙培训中心", "Java软件工程师班");dataset.addValue(220, "中科院计算所培训中心", "软件工程师班");dataset.addValue(250, "沈阳培训中心", "软件工程师班");dataset.addValue(280, "长沙培训中心", "软件工程师班");dataset.addValue(320, "中科院计算所培训中心", "平面工程师班");dataset.addValue(350, "沈阳培训中心", "平面工程师班");dataset.addValue(380, "长沙培训中心", "平面工程师班");dataset.addValue(420, "中科院计算所培训中心", "网络工程师班");dataset.addValue(450, "沈阳培训中心", "网络工程师班");dataset.addValue(480, "长沙培训中心", "网络工程师班");dataset.addValue(520, "中科院计算所培训中心", "动漫工程师班");dataset.addValue(550, "沈阳培训中心", "动漫工程师班");dataset.addValue(580, "长沙培训中心", "动漫工程师班");return dataset;}3、创建JFreeChart类的对象实例的代码示例CategoryDataset dataset = getDataSet2();FreeChart chart = ChartFactory.createBarChart3D("招生人数图", // 图表标题"班别", // 目录轴（横坐标）的显示标签"人数", // 数值轴（纵坐标）的显示标签dataset, // 数据集PlotOrientation.VERTICAL, // 图表方向：水平、垂直true, // 是否显示图例(对于简单的柱状图必须是false)false, // 是否生成工具false // 是否生成URL链接);org.jfree.chart.ChartFactory这个工厂类有createBarChart、createStackedBarChart、createBarChart3D、createStackedBarChart3D等方法，这几个工厂方法创建不同类型的柱状图；而其中的PlotOrientation.VERTICAL 参加数让平行柱垂直显示，而 PlotOrientation.HORIZONTAL 则让平行柱水平显示。

Java开发条形图、柱形图、饼图生成

Java开发条形图、柱形图、饼图生成

JreeChart案例jFreeChart是Java开发中常用的统计类组件，主要包括柱状图，饼状图等。

下面我们介绍一下jFreeChart最简单的用法。

首先需要导入jFreeChart的jar包，放在项目web\WEB-INF\lib文件夹下。

然后我们以最简洁的代码实现一个统计功能。

1.柱状图import j ava.aw t.Color;import j ava.aw t.Font;import j ava.io.FileNotFoundException;import j ava.io.FileOutputStream;import j ava.io.IOException;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartUtilities;import org.jfree.chart.JFreeChart;import org.jfree.chart.axis.CategoryAxis;import org.jfree.chart.axis.NumberAxis;import org.jfree.chart.plot.CategoryPlot;import org.jfree.chart.plot.PlotOrientation;import org.jfree.chart.title.TextTitle;import org.jfree.data.category.Def aultCategoryDataset;public class BarChartTest {public static void main(String[] args) {Def aultCategoryDataset dataset = new Def aultCategoryD ataset();dataset.addValue(20, "企业备案数", "北京局");dataset.addValue(18, "企业备案数", "上海局");dataset.addValue(16, "企业备案数", "天津局");dataset.addValue(15, "企业备案数", "重庆局");dataset.addValue(45, "企业备案数", "山东局");JFreeChart chart = ChartFactory.createBarChart("企业备案图", "直属局", "企业备案数",dataset, PlotOrientation.HORIZ ONTA L, true, f alse, false);/***************A start*********///设置标题字体样式TextTitle textTitle = chart.getTitle();textTitle.setFont(new Font("黑体", Font.PLAIN, 20));//设置柱状体颜色C ategoryPlot categoryplot = (CategoryPlot) chart.getPlot ();categoryplot.getRenderer().setSeriesPaint(0, new Color (228,109,10));NumberAxis numberaxis = (NumberAxis) categoryplot.ge tRangeAxis();C ategoryAxis domainAxis = categoryplot.getDomainAxis ();//设置X轴坐标上的字体样式domainAxis.setTickLabelFont(new Font("sans-serif", Font. PLAIN, 11));//设置X轴的标题字体样式domain Axis.setLabelFont(new Font("宋体", Font.PLAIN, 1 2));//设置Y轴坐标上的字体样式numberaxis.setTickLabelFont(new Font("sans-serif", Font. PLAIN, 12));//设置Y轴的标题字体样式numberaxis.setLabelFont(new Font("黑体", Font.PLAIN, 1 2));//设置图片最底部字体样式if (c hart.getLegend() != null) {c hart.getLegend().setItemFont(new Font("宋体", Font. PLAIN, 12));}/***************A end*********/try{ChartUtilities.writeChartAsPNG(new FileOutputStream ("D:\\barChart.j pg"), c hart, 400, 200);} c atch (FileNotFoundException e) {e.printStackTrace();} c atch (IOException e) {e.printStackTrace();}}}生成的文件显示效果如下：2.饼状图import j ava.aw t.Color;import j ava.aw t.Font;import j ava.io.FileNotFoundException;import j ava.io.FileOutputStream;import j ava.io.IOException;import j ava.text.DecimalFormat;import j ava.text.N umberFormat;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartUtilities;import org.jfree.chart.JFreeChart;import bels.StandardPieSectionLabelGenerato r;import org.jfree.chart.plot.PiePlot;import org.jfree.data.general.DefaultPieDataset;public class PieChartTest {public static void main(String[] args){Def aultPieDataset pieDataset = new Def aultPieDataset();pieDataset.setValue("北京局",20);pieDataset.setValue("上海局",18);pieDataset.setValue("天津局",16);pieDataset.setValue("重庆局",15);pieDataset.setValue("山东局",45);JFreeChart chart = ChartFactory.createPieChart3D("企业备案图",pieDataset, true, f alse, false);/***************A start*********///设置标题字体样式chart.getTitle().setFont(new Font("黑体",Font.BOLD,20));//设置饼状图里描述字体样式PiePlot piePlot= (PiePlot) chart.getPlot();piePlot.setLabelFont(new Font("黑体",Font.B OLD,10));//设置显示百分比样式piePlot.setLabelGenerator(new StandardPieSectionLabelG enerator(("{0}({2})"), NumberFormat.getNumberInstance (),new DecimalFormat("0.00%")));//设置统计图背景piePlot.setBackgroundPaint(Color.w hite);//设置图片最底部字体样式chart.getLegend().setItemFont(new Font("黑体",Font.BOL D,10));/***************A end*********/try{ChartUtilities.writeChartAsPNG(new FileOutputStream ("D:\\pieChart.jpg"), chart, 400, 300);} c atch (FileNotFoundException e) {e.printStackTrace();} c atch (IOException e) {e.printStackTrace();}}}生成的文件显示效果如下：其中以上两段代码中的“A”代码块中的内容是为了解决图片生成过程中遇到的乱码问题，在实际开发中可以写到一个公共类中，此时应注意服务器的操作系统上是否缺少上述代码中所用到的字体。

基于Struts2和AJAX的网上汽车配件商城的设计与实现

基于Struts2和AJAX的网上汽车配件商城的设计与实现

３ 页 面 交 互 和 动 态 展 示 ： Ｗ ３ Ｄ ｃｍｅｔ ｂｅｔ 列 化 。 因为对 数 据 库 的操 作共 分 为增 删 改查 四种 ，所 以系统 在 构 ． Ｃ ｏｕ ｎ Ｏ ｊｃ 建 Ｄ Ｏ操 作 层 时只 需要 关注 相应方 法 的编 写 ， 时注 意这 些方法 Ａ 同 Ｍｏ ｅ Ｄ Ｍ） ｄｌ Ｏ ； （
ＷＲ 的 Ｊｖｓｒ ｔ ａａｃｉ 文件 ，包 括 ｅｇｎ． 和 ｕｉ ｓ ｐ ｎ ｉｅｓ ｊ ｔ． ，之 后就 ｌ ｊ 方 法用 于根 据 对象 的 Ｉ 和 对 象类 型获取 实 体对 象信 息 。之后 建 后 导入 Ｄ Ｄ 可 以在 页面 实现 无 刷 新效 果 了 。本系 统 中 的很 多 页面 效果 ，比如 立 的具体 Ｄ Ｏ对 象 都继 承 自这个 基类 ， Ａ 自动 获取 基础 操 作方 法 ， 查 找的 自动补 全 效果 ，就是 Ｄ ＷＲ 的贡献 。 实现 对汽 车配 件信 息数 据库 的操作 。 最 后通 过对 Ｓ ｕｓ ｔｔ ｒ ２配置 文件 ｓｕｓ ｍｌ ｔ ｔｘ 的编 辑 ， ｒ ． 来配 置 Ａｃｏ ｔｎ ｉ 中 ｍｅ ｏ 属 性与 ｒｓｌ元素 的对 应关 系 ， 要采 用通 配符 的方 式 ， ｔｄ ｈ ｅ ｔ ｕ 十 在业 务逻 辑层 ， 系统 构建 一个 包含 业务 对象 基本 属性 和方 法 使 页面 更为 丰富 ，系统 更加 灵 活 。 的基 础业 务类 ， 车 配件 商城 的每 一个 新建 的业 务对 象都 继承 这 汽 五 、结 束语
ｃｒ ｎｎｌｇｉｇ ａ 都 复制 到 ＷＥ — Ｆｌ ｏ ｒｏ－ ｇｎ．ｒ ｎ ｏ ｊ ＢＩ ／ｂ下 ，修 改 ｗ ｂ ｍｌ Ｎ ｉ ｅ ． 文件 ｘ 保 证将 请求 转发 给 Ｄ ＷＲ 的核心 Ｓｒｌ ， ｅｖｅ 同时在 ｗ ｂ ｒｌ 目录 下 ｔ ｅ ．ｎ 同 ｘ 创建 ｄ ｒ ｍｌ ｗ ． ，用来 定义 Ｊｖ 类 和 Ｊｖ ｓｒ ｔ 间 的对 应 关系 。然 ｘ ａａ ａａｃｉ 之 ｐ

java柱状图和饼状图的动态实现

java柱状图和饼状图的动态实现

java柱状图和饼状图的动态实现import java.awt.*;import javax.swing.*;import java.util.List;import java.util.ArrayList;import java.util.Random;import ng.Math;public class Part extends JFrame {public Part() {this.setTitle("java图形程序设计");this.setSiz e(this.WIDTH, this.HEIGHT);//设置窗体位置，使其绝对居中this.setLocation((dim.width - this.WIDTH) / 2,(dim.height - this.HEIGHT) / 2);this.setDefaultCloseOperation(this.EXIT_ON_CLOSE);this.add(panel);}//得到当前默认分辨率java.awt.Dimension dim = java.awt.Toolkit.getDefaultToolkit().getScreenSiz e();public static void main(String[] args) {Part main = new Part();//设定柱状图标题Part.panel.setHistogramTitle("资金(元)", "事项");//插入绘图数据，比例动态计算MyPanel.insert("教育", 200.5f);MyPanel.insert("科技", 200.5f);MyPanel.insert("登月", 300.2f);MyPanel.insert("建设", 400.1f);MyPanel.insert("a", 300.2f);MyPanel.insert("b", 100.5f);// MyPanel.insert("c", 100);// MyPanel.insert("d", 300);// MyPanel.insert("b", 200);// MyPanel.insert("c", 100);main.setVisible(true);//定时器控制切换javax.swing.Timer timer = new Timer(1000,new java.awt.event.ActionListener() {public void actionPerformed(java.awt.event.ActionEvent e) {panel.repaint();}});timer.start();}public static final int WIDTH = 800;public static final int HEIGHT = 600;static MyPanel panel = new MyPanel();}class MyPanel extends JPanel {public MyPanel() {this.xTitle = "X";this.yTitle = "Y";}public MyPanel(String x, String y) {this.xTitle = x;yTitle = y;}public static void insert(String aElem, float aValue) {elem.add(aElem);value.add(aValue);}public void paintComponent(Graphics g) {super.paintComponent(g);g.clearRect(0, 0, Part.WIDTH, Part.HEIGHT);if (flag) {drawHistogram(g);flag = false;} else {drawCaky(g);flag = true;}}//画柱状图public void drawHistogram(Graphics g) {g.setColor(Color.BLACK);g.setFont(new Font("隶书", Font.PLAIN, 15));g.drawString("柱状图", SIZE + 200, 30);g.setColor(Color.GREEN);//竖线g.drawLine(SIZE, Part.HEIGHT - SIZE, SIZE, SIZE);//横线g.drawLine(SIZE, Part.HEIGHT - SIZE, Part.WIDTH - SIZE,Part.HEIGHT - SIZE);//箭头g.setColor(Color.RED);int[] x1 = {SIZE - 6, SIZE, SIZE + 6};int[] y1 = {SIZE + 8, SIZE, SIZE + 8};g.drawPolyline(x1, y1, 3);int[] x2 = {Part.WIDTH - SIZE - 8, Part.WIDTH - SIZE,Part.WIDTH - SIZE - 8};int[] y2 = {Part.HEIGHT - SIZE - 6, Part.HEIGHT - SIZE,Part.HEIGHT - SIZE + 6};g.drawPolyline(x2, y2, 3);//titleg.drawString(this.yTitle, SIZE - 20, SIZE - 6);g.drawString(this.xTitle, Part.WIDTH - SIZE - 20,Part.HEIGHT - SIZE + 20);//动态计算每个柱状图的宽int wigth = (int) ((Part.WIDTH - 3 * SIZE) / (value.siz e() * 2));//取数据中的最大值float max = 0;for (Float elem : value) {if (max < elem.intValue()) {max = elem.intValue();}}//按比例计算高度double num = (double) (Part.HEIGHT - 2 * (SIZE + 10)) / (double) max; //画出每个柱状图for (int i = 0; i < elem.siz e(); i++) {int height = (int) (value.get(i) * num);// g.drawRect(wigth*(i*2+2),Main.HEIGHT-SIZE-height,wigth,height);g.setColor(new java.awt.Color(Digit.getDigit(255),Digit.getDigit(255),Digit.getDigit(255)));//填充颜色g.fillRect(wigth * (i * 2 + 1) + SIZE, Part.HEIGHT - SIZE - height,wigth, height);g.setColor(Color.RED);//画出每项名字g.drawString(Float.toString(value.get(i)),wigth * (i * 2 + 1) + SIZE,Part.HEIGHT - SIZE - 20 - height);//在横线上画出每项名字g.drawString(elem.get(i), wigth * (i * 2 + 1) + SIZE,Part.HEIGHT - SIZE + 20);//在竖线上画出每项高度值g.drawString(Float.toString(value.get(i)), SIZE - 40,Part.HEIGHT - SIZE - height + 5);//在竖线上画出标识点g.drawLine(SIZE, Part.HEIGHT - SIZE - height, SIZE + 3,Part.HEIGHT - SIZE - height);}}//画饼图public void drawCaky(Graphics g) {g.setColor(Color.BLUE);g.setFont(new Font("楷体_GB2312", Font.BOLD, 15));int wigth = (int) ((Part.WIDTH - CAKY_WIDTH) / 2);int height = (int) ((Part.HEIGHT - CAKY_WIDTH) / 2);g.drawOval(wigth, height, CAKY_WIDTH, CAKY_WIDTH);g.drawString("饼图", (int) (Part.WIDTH / 2) - 30, height - 50);int sum = 0;for (Float elem : value) {sum += elem.intValue();}double part = 360d / sum;int currentAngle = 0;int half = (int) (CAKY_WIDTH + 50) / 2;int xFlag = 1;int yFlag = -1;for (int i = 0; i < elem.siz e(); i++) {int angle = (int) (part * value.get(i).intValue() + 0.5);g.setColor(new java.awt.Color(Digit.getDigit(255),Digit.getDigit(255),Digit.getDigit(255)));g.fillArc(wigth, height, CAKY_WIDTH, CAKY_WIDTH, currentAngle, angle);//用于计算每个圆周的值if (currentAngle > 90 && currentAngle < 181) {xFlag = 1;yFlag = -1;} else if (currentAngle > 180 && currentAngle < 271) {xFlag = 1;yFlag = -1;} else if (currentAngle > 270) {xFlag = 1;yFlag = -1;}//计算每块的标识字符串坐标int x = (int) (Math.cos((double) (currentAngle + angle / 2) *Math.PI / 180) *xFlag * half + wigth - 40 +half);int y = (int) (Math.sin((double) (currentAngle + angle / 2) * Math.PI / 180) *yFlag * half + height - 20 +half);g.drawString(elem.get(i), x, y);currentAngle += angle;}}public void setHistogramTitle(String y, String x) {xTitle = x;yTitle = y;}private boolean flag = true;private final int SIZE = 100;private final int CAKY_WIDTH = 400;private final int STEP = 10;private String xTitle;private String yTitle;private static List<String> elem = new ArrayList<String>();private static List<Float> value = new ArrayList<Float>();}class Digit {public Digit() {}//产生0-digit范围内的随机整数public static int getDigit(int digit) {java.util.Random ran = new Random();return (int) (ran.nextDouble() * digit);}。

(整理)java做曲线图柱状图数据统计.

(整理)java做曲线图柱状图数据统计.
用于生成图象的帮助提示，不同类型图表对应不同类型的工具提示类
下面以柱状图和饼图以及折线图为例，介绍图形创建方法。
1)柱状图
org.jfree.chart.ChartFactory这个工厂类有
createBarChart、
createStackedBarChart、
createBarChart3D、
createStackedBarChart3D，这几个工厂方法创建不同类型的柱状图，比较重要的是PlotOrientation.VERTICAL让平行柱垂直显示，而PlotOrientation.HORIZONTAL则让平行柱水平显示。
类名
类的作用以及简单描述
JFreeChart
图表对象，任何类型的图表的最终表现形式都是在该对象进行一些属性的定制。JFreeChart引擎本身提供了一个工厂类用于创建不同类型的图表对象
XXXXXDataset
数据集对象，用于提供显示图表所用的数据。根据不同类型的图表对应着很多类型的数据集对象类
XXXXXPlot
"水果", //目录轴的显示标签
"产量", //数值轴的显示标签
dataset, //数据集
PlotOrientation.VERTICAL, //图表方向：水平、垂直
true,//是否显示图例(对于简单的柱状图必须是false)
false,//是否生成工具
false//是否生成URL链接
);
CategoryPlot plot = chart.getCategoryPlot();
renderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator());

echarts在.Net中使用实例（二）使用ajax动态加载数据

echarts在.Net中使用实例（二）使用ajax动态加载数据

echarts在.Net中使⽤实例（⼆）使⽤ajax动态加载数据前⼀篇⽂章链接：通过上⼀篇⽂章可以知道和echarts参考⼿册可知，series字段就是⽤来存储我们显⽰的数据，所以我们只需要⽤ajax来获取series的值就可以.option{color}backgroundColor全图默认背景，（详见），⽀持rgba，默认为⽆，透明{Array} color数值系列的颜⾊列表，（详见），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数⽐颜⾊列表长度⼤时将循环选取{boolean}renderAsImage⾮IE8-⽀持渲染为图⽚，（详见）{boolean}calculable是否启⽤拖拽重计算特性，默认关闭，（详见，相关的还有，，，）{boolean}animation是否开启动画，默认开启，（详见，相关的还有，，，，）{Object} timeline时间轴（详见），每个图表最多仅有⼀个时间轴控件{Object} title标题（详见），每个图表最多仅有⼀个标题控件{Object} toolbox⼯具箱（详见），每个图表最多仅有⼀个⼯具箱{Object} tooltip提⽰框（详见），⿏标悬浮交互时的信息提⽰{Object} legend图例（详见），每个图表最多仅有⼀个图例，混搭图表共享{Object}dataRange值域选择（详见）,值域范围{Object}dataZoom数据区域缩放（详见）,数据展现范围选择{Object}roamController漫游缩放组件（详见）,搭配地图使⽤{Object} grid直⾓坐标系内绘图⽹格（详见）{Array | Object}xAxis直⾓坐标系中横轴数组（详见），数组中每⼀项代表⼀条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴{Array | Object}yAxis直⾓坐标系中纵轴数组（详见），数组中每⼀项代表⼀条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴{Array} series驱动图表⽣成的数据内容（详见），数组中每⼀项代表⼀个系列的特殊选项及数据⾸先定义⼀个Serial类///<summary>///定义⼀个Series类设置其每⼀组sereis的⼀些基本属性///</summary>class Series{///<summary>/// sereis序列组id///</summary>//public int id//{// get;// set;//}///<summary>/// series序列组名称///</summary>public string name{get;set;}///<summary>/// series序列组呈现图表类型(line、column、bar等)///</summary>public string type{get;set;}///<summary>/// series序列组的数据为数据类型数组///</summary>public List<double> data{get;}}View Code接着将Serial实例化并将其转化为json格式(必须⽤⼤神器：Newtonsoft.Json.dll)，代码如下图private void ShowChart(){//考虑到图表的series数据为⼀个对象数组这⾥额外定义⼀个series的类List<Series> seriesList = new List<Series>();Series series1 = new Series(); = "actual";series1.type = "bar";series1.data = new List<double>(){ 26061649.1, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00 };Series series2 = new Series(); = "Budget";series2.type = "bar";series2.data = new List<double>() { 28176503.36, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 2777777.00, 0.00, 0.00, 0.00, 0.00, 0.00, }; seriesList.Add(series1);seriesList.Add(series2);var newObj = new{series = seriesList};string strJson = ToJson(newObj);WriteJson(strJson);}public static string ToJson( object obj){return NewtonsoftJson(obj);}public static string NewtonsoftJson(object obj){return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);}private static void WriteJson(string str){HttpContext.Current.Response.Write(str);//HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式HttpContext.Current.Response.End();}View Code前台代码只需要⽤ajax来获取值并赋给option的serial属性即可<!DOCTYPE html><html><head><meta charset="utf-8"/><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript" src="echarts/echarts.js"></script></head><body><div id="main" style=" height:400px;"></div></body></html><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'echarts'}});require(['echarts','echarts/chart/bar' // 使⽤柱状图就加载bar模块，按需加载],function (ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main'));var option = {tooltip: {show: true},legend: {data: ['Actual', 'Budget']},xAxis: [{type: 'category',data: ['⼀⽉', '⼆⽉', '三⽉', '四⽉', '五⽉', '六⽉', '七⽉', '⼋⽉', '九⽉', '⼗⽉', '⼗⼀⽉', '⼗⼆⽉'] }],yAxis: [{type: 'value'//Y轴显⽰的类型,默认为value}],series: []};//ajax动态获取数据$.ajax({type: 'post',url: 'ajax.ashx?action=ShowChart',data: {},dataType: 'json',async: false,success: function (result) {if (result) {// 获取json值option.series = result.series;// 为echarts对象加载数据myChart.setOption(option);}},error: function () {alert("Error");}});});</script>View Code所见即所得当然，最后奉上源码！。

Echarts通过Ajax动态获取后端数据（条形图、饼图）

Echarts通过Ajax动态获取后端数据（条形图、饼图）

Echarts通过Ajax动态获取后端数据（条形图、饼图）1 饼图1.1 后端-Controller层传的是List型数据/*** 按客户所在城市统计————饼图* @param model* @return*/@RequestMapping("/show")@ResponseBodypublic List<Echarts> show(Model model) {List<Echarts> echartsList = clientService.getCity();System.out.println("echartsList:"+echartsList.get(1).getName());return echartsList;}@RequestMapping("/showCity")public String showCity() {return "showCity";}1.2 前端showCity.html需要引⼊<script src="https:///echarts/4.3.0/echarts.min.js"></script><script type="text/javascript">//基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.clear();var names = [];var mydata = [];$.ajax({method: 'get',url: '/show',dataType: 'json',success: function (datas) {for (var i=0;i<datas.length;i++){names.push(datas[i].name);mydata[i] = {value: datas[i].value, name: datas[i].name};}// 指定图表的配置项和数据var option = {title: {text: '客户所在城市统计',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: names},series: [{name: '所在城市',type: 'pie',radius: '55%',center: ['50%', '60%'],data: mydata,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使⽤刚指定的配置项和数据显⽰图表。

struts2&AJAX(part2)

struts2&AJAX(part2)

Struts 2与AJAX（第二部分）在上一篇文章《Struts 2与AJAX（第一部分）》，我已经简单地介绍了<s:tree />的一些用法，接下来我将继续深入讲解<s:tree />的使用和通过DWR实现AJAX校验。

更多<s:tree />在Struts 2的showcase中有两个<s:tree />的例子，分别是静态树与动态树。

所谓的静态树即是在编写JSP代码时通过<s:treenode />生成树节点。

我的上一篇文章的例子就是一个典型的静态树。

而动态树则是在程序运行期间，Struts 2 运行时（Runtime）根据程序中的数据动态创建树节点。

虽然在两个例子中<s:tree />的theme属性都为“ajax”，但是从严格意义上来说，这两种树都不属于AJAX树，因为它们都是在输出页面时将全部节点加载到其中，而不是在父节点展开时通过XHR（XMLHttpRequest）获取节点数据。

动态树下面我们先看一下动态树的例子，接着再一步步地将其改造为名副其实的AJAX 树。

下例将会把WEB应用程序的目录树展现在JSP页面中。

因此，我需要先包装一下java.io.File 类，代码如下：package tutorial;import java.io.File;public class FileWrapper {private File file;public FileWrapper(String path) {file = new File(path);}public FileWrapper(File file) {this.file = file;}public String getId() {return"file_" + file.hashCode();}public String getName() {return file.getName();}public String getAbsolutePath() {return file.getAbsolutePath();}public FileWrapper[] getChildren() {File[] files = file.listFiles();if(files != null&& files.length > 0) {int length = files.length;FileWrapper[] wrappers = new FileWrapper[length];for(int i = 0; i < length; ++i) {wrappers[i] = new FileWrapper(files[i]);}return wrappers;}return new FileWrapper[0];}}清单1 src/tutorial/FileWrapper.java之所以需要对File类进行如此包装，是因为<s:tree />用于动态树时，rootNode、nodeIdProperty、nodeTitleProperty 和childCollectionProperty等属性都必填的。

使用java实现各种数据统计图（柱形图，饼图，折线图）

使用java实现各种数据统计图（柱形图，饼图，折线图）

使⽤java实现各种数据统计图（柱形图，饼图，折线图）最近在做数据挖掘的课程设计，需要将数据分析的结果很直观的展现给⽤户，这就要⽤到数据统计图，要实现这个功能就需要⼏个第三⽅包了：1. jfreechart-1.0.13.jar2. jcommon-1.0.16.jar3. gnujaxp.jar先来看⼀下，最终效果图：接下来，我们⼀步步来实现本程序。

1，建,⽴java项⽬，在这个项⽬在建⽴⼀个新的⽂件夹lib；2，将上述三个jar包，复制到lib3，然后右键点击这个java项⽬，选择Properties4，在左侧列表⾥选中Java Build Path，右侧选中Libraries5，点击Add JARs6，然后去选择这个项⽬中lib⽂件夹中的三个jar，点击确定成功后，项⽬中会多⼀个⽂件夹为：Referenced Libraries⼆，实现柱形图的java代码：import java.awt.Font;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartPanel;import org.jfree.chart.JFreeChart;import org.jfree.chart.axis.CategoryAxis;import org.jfree.chart.axis.ValueAxis;import org.jfree.chart.plot.CategoryPlot;import org.jfree.chart.plot.PlotOrientation;import org.jfree.data.category.CategoryDataset;import org.jfree.data.category.DefaultCategoryDataset;public class BarChart {ChartPanel frame1;public BarChart(){CategoryDataset dataset = getDataSet();JFreeChart chart = ChartFactory.createBarChart3D("⽔果", // 图表标题"⽔果种类", // ⽬录轴的显⽰标签"数量", // 数值轴的显⽰标签dataset, // 数据集PlotOrientation.VERTICAL, // 图表⽅向：⽔平、垂直true, // 是否显⽰图例(对于简单的柱状图必须是false)false, // 是否⽣成⼯具false // 是否⽣成URL链接);//从这⾥开始CategoryPlot plot=chart.getCategoryPlot();//获取图表区域对象CategoryAxis domainAxis=plot.getDomainAxis(); //⽔平底部列表domainAxis.setLabelFont(new Font("⿊体",Font.BOLD,14)); //⽔平底部标题domainAxis.setTickLabelFont(new Font("宋体",Font.BOLD,12)); //垂直标题ValueAxis rangeAxis=plot.getRangeAxis();//获取柱状rangeAxis.setLabelFont(new Font("⿊体",Font.BOLD,15));chart.getLegend().setItemFont(new Font("⿊体", Font.BOLD, 15));chart.getTitle().setFont(new Font("宋体",Font.BOLD,20));//设置标题字体//到这⾥结束，虽然代码有点多，但只为⼀个⽬的，解决汉字乱码问题frame1=new ChartPanel(chart,true); //这⾥也可以⽤chartFrame,可以直接⽣成⼀个独⽴的Frame }private static CategoryDataset getDataSet() {DefaultCategoryDataset dataset = new DefaultCategoryDataset();dataset.addValue(100, "北京", "苹果");dataset.addValue(100, "上海", "苹果");dataset.addValue(100, "⼴州", "苹果");dataset.addValue(200, "北京", "梨⼦");dataset.addValue(200, "上海", "梨⼦");dataset.addValue(200, "⼴州", "梨⼦");dataset.addValue(300, "北京", "葡萄");dataset.addValue(300, "上海", "葡萄");dataset.addValue(300, "⼴州", "葡萄");dataset.addValue(400, "北京", "⾹蕉");dataset.addValue(400, "上海", "⾹蕉");dataset.addValue(400, "⼴州", "⾹蕉");dataset.addValue(500, "北京", "荔枝");dataset.addValue(500, "上海", "荔枝");dataset.addValue(500, "⼴州", "荔枝");return dataset;}public ChartPanel getChartPanel(){return frame1;}}效果图如下：但我们把private static CategoryDataset getDataSet(){}⽅法中的数据变化⼀下后，⼜会形成另⼀种效果，⽐如说我们改成：private static CategoryDataset getDataSet() {DefaultCategoryDataset dataset = new DefaultCategoryDataset();dataset.addValue(100, "苹果", "苹果");dataset.addValue(200, "梨⼦", "梨⼦");dataset.addValue(300, "葡萄", "葡萄");dataset.addValue(400, "⾹蕉", "⾹蕉");dataset.addValue(500, "荔枝", "荔枝");return dataset;}效果图如下：三实现饼状图的java代码：package com.njue.testJFreeChart;import java.awt.Font;import java.text.DecimalFormat;import java.text.NumberFormat;import javax.swing.JPanel;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartPanel;import org.jfree.chart.JFreeChart;import bels.StandardPieSectionLabelGenerator;import org.jfree.chart.plot.PiePlot;import org.jfree.data.general.DefaultPieDataset;public class PieChart {ChartPanel frame1;public PieChart(){DefaultPieDataset data = getDataSet();JFreeChart chart = ChartFactory.createPieChart3D("⽔果产量",data,true,false,false);//设置百分⽐PiePlot pieplot = (PiePlot) chart.getPlot();DecimalFormat df = new DecimalFormat("0.00%");//获得⼀个DecimalFormat对象，主要是设置⼩数问题NumberFormat nf = NumberFormat.getNumberInstance();//获得⼀个NumberFormat对象StandardPieSectionLabelGenerator sp1 = new StandardPieSectionLabelGenerator("{0} {2}", nf, df);//获得StandardPieSectionLabelGenerator对象 pieplot.setLabelGenerator(sp1);//设置饼图显⽰百分⽐//没有数据的时候显⽰的内容pieplot.setNoDataMessage("⽆数据显⽰");pieplot.setCircular(false);pieplot.setLabelGap(0.02D);pieplot.setIgnoreNullValues(true);//设置不显⽰空值pieplot.setIgnoreZeroValues(true);//设置不显⽰负值frame1=new ChartPanel (chart,true);chart.getTitle().setFont(new Font("宋体",Font.BOLD,20));//设置标题字体PiePlot piePlot= (PiePlot) chart.getPlot();//获取图表区域对象piePlot.setLabelFont(new Font("宋体",Font.BOLD,10));//解决乱码chart.getLegend().setItemFont(new Font("⿊体",Font.BOLD,10));}private static DefaultPieDataset getDataSet() {DefaultPieDataset dataset = new DefaultPieDataset();dataset.setValue("苹果",100);dataset.setValue("梨⼦",200);dataset.setValue("葡萄",300);dataset.setValue("⾹蕉",400);dataset.setValue("荔枝",500);return dataset;}public ChartPanel getChartPanel(){return frame1;}}效果图如下：四实现折线图的java代码：package com.njue.testJFreeChart;import java.awt.Font;import java.text.SimpleDateFormat;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartPanel;import org.jfree.chart.JFreeChart;import org.jfree.chart.axis.DateAxis;import org.jfree.chart.axis.ValueAxis;import org.jfree.chart.plot.XYPlot;import org.jfree.data.time.Month;import org.jfree.data.time.TimeSeries;import org.jfree.data.time.TimeSeriesCollection;import org.jfree.data.xy.XYDataset;public class TimeSeriesChart {ChartPanel frame1;public TimeSeriesChart(){XYDataset xydataset = createDataset();JFreeChart jfreechart = ChartFactory.createTimeSeriesChart("Legal & General单位信托基⾦价格", "⽇期", "价格",xydataset, true, true, true); XYPlot xyplot = (XYPlot) jfreechart.getPlot();DateAxis dateaxis = (DateAxis) xyplot.getDomainAxis();dateaxis.setDateFormatOverride(new SimpleDateFormat("MMM-yyyy"));frame1=new ChartPanel(jfreechart,true);dateaxis.setLabelFont(new Font("⿊体",Font.BOLD,14)); //⽔平底部标题dateaxis.setTickLabelFont(new Font("宋体",Font.BOLD,12)); //垂直标题ValueAxis rangeAxis=xyplot.getRangeAxis();//获取柱状rangeAxis.setLabelFont(new Font("⿊体",Font.BOLD,15));jfreechart.getLegend().setItemFont(new Font("⿊体", Font.BOLD, 15));jfreechart.getTitle().setFont(new Font("宋体",Font.BOLD,20));//设置标题字体 }private static XYDataset createDataset() { //这个数据集有点多，但都不难理解 TimeSeries timeseries = new TimeSeries("legal & general欧洲指数信任", org.jfree.data.time.Month.class);timeseries.add(new Month(2, 2001), 181.80000000000001D);timeseries.add(new Month(3, 2001), 167.30000000000001D);timeseries.add(new Month(4, 2001), 153.80000000000001D);timeseries.add(new Month(5, 2001), 167.59999999999999D);timeseries.add(new Month(6, 2001), 158.80000000000001D);timeseries.add(new Month(7, 2001), 148.30000000000001D);timeseries.add(new Month(8, 2001), 153.90000000000001D);timeseries.add(new Month(9, 2001), 142.69999999999999D);timeseries.add(new Month(10, 2001), 123.2D);timeseries.add(new Month(11, 2001), 131.80000000000001D);timeseries.add(new Month(12, 2001), 139.59999999999999D);timeseries.add(new Month(1, 2002), 142.90000000000001D);timeseries.add(new Month(2, 2002), 138.69999999999999D);timeseries.add(new Month(3, 2002), 137.30000000000001D);timeseries.add(new Month(4, 2002), 143.90000000000001D);timeseries.add(new Month(5, 2002), 139.80000000000001D);timeseries.add(new Month(6, 2002), 137D);timeseries.add(new Month(7, 2002), 132.80000000000001D);TimeSeries timeseries1 = new TimeSeries("legal & general英国指数信任", org.jfree.data.time.Month.class);timeseries1.add(new Month(2, 2001), 129.59999999999999D);timeseries1.add(new Month(3, 2001), 123.2D);timeseries1.add(new Month(4, 2001), 117.2D);timeseries1.add(new Month(5, 2001), 124.09999999999999D);timeseries1.add(new Month(6, 2001), 122.59999999999999D);timeseries1.add(new Month(7, 2001), 119.2D);timeseries1.add(new Month(8, 2001), 116.5D);timeseries1.add(new Month(9, 2001), 112.7D);timeseries1.add(new Month(10, 2001), 101.5D);timeseries1.add(new Month(11, 2001), 106.09999999999999D);timeseries1.add(new Month(12, 2001), 110.3D);timeseries1.add(new Month(1, 2002), 111.7D);timeseries1.add(new Month(2, 2002), 111D);timeseries1.add(new Month(3, 2002), 109.59999999999999D);timeseries1.add(new Month(4, 2002), 113.2D);timeseries1.add(new Month(5, 2002), 111.59999999999999D);timeseries1.add(new Month(6, 2002), 108.8D);timeseries1.add(new Month(7, 2002), 101.59999999999999D);TimeSeriesCollection timeseriescollection = new TimeSeriesCollection(); timeseriescollection.addSeries(timeseries);timeseriescollection.addSeries(timeseries1);return timeseriescollection;}public ChartPanel getChartPanel(){return frame1;}}效果图如下：再来看⼀下主⽅法：import java.awt.GridLayout;import javax.swing.JFrame;public class mainClass {public static void main(String args[]){JFrame frame=new JFrame("Java数据统计图");frame.setLayout(new GridLayout(2,2,10,10));frame.add(new BarChart().getChartPanel()); //添加柱形图frame.add(new BarChart1().getChartPanel()); //添加柱形图的另⼀种效果frame.add(new PieChart().getChartPanel()); //添加饼状图frame.add(new TimeSeriesChart().getChartPanel()); //添加折线图frame.setBounds(50, 50, 800, 600);frame.setVisible(true);}}五总结以上都是⼀个简单的例⼦去实现了，想了解更深的同学可⾃⾏查询资料，其实以上代码都通俗易懂，只要结合⾃⼰的实际情况，便可开发出属于⾃⼰的Application，⼤家可以看出我这⾥是在Application上实现的，其实更多情况数据统计图在javaweb 上应⽤更多，⼤家也可⾃⾏了解。

Echarts学习总结（一）-----柱状图

Echarts学习总结（一）-----柱状图

Echarts学习总结（⼀）-----柱状图简介ECharts，缩写来⾃Enterprise Charts，商业级数据图表，基于【HTML5】Canvas （ZRender），纯Javascript图表库，是百度的⼀个开源的数据可视化⼯具，业界给予了很多赞誉，这⾥不多说，需要了解详情的同学参见官⽹。

我简略看了下，最贴切的地⽅在于本地化⽀持，⽐如对于中国地图的⽀持。

名词解释基本名词chart是指⼀个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合⽽成的“混搭”图表，可能包括坐标轴、图例等axis直⾓坐标系中的⼀个坐标轴，坐标轴可分为类⽬轴和数值轴xAxis直⾓坐标系中的横轴，通常并默认为类⽬轴yAxis直⾓坐标系中的纵轴，通常并默认为数值轴grid直⾓坐标系中除坐标轴外的绘图⽹格legend图例，表述数据和图形的关联dataRange值域选择，常⽤于展现地域数据时选择值域范围dataZoom数据区域缩放，常⽤于展现⼤数据时选择可视范围toolbox辅助⼯具箱，辅助功能，如添加标线，框选缩放等tooltip⽓泡提⽰框，常⽤于展现更详细的数据timeline时间轴，常⽤于展现同⼀组数据在时间维度上的多份数据series数据系列，⼀个图表可能包含多个系列，每⼀个系列可能包含多个数据图表名词line折线图，堆积折线图，区域图，堆积区域图。

bar柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。

scatter散点图，⽓泡图。

散点图⾄少需要横纵两个数据，更⾼维度数据加⼊时可以映射为颜⾊或⼤⼩，当映射到⼤⼩时则为⽓泡图k K线图，蜡烛图。

常⽤于展现股票交易数据。

pie饼图，圆环图。

饼图⽀持两种（半径、⾯积）南丁格尔玫瑰图模式。

radar雷达图，填充雷达图。

⾼维度数据展现的常⽤图表。

chord和弦图。

常⽤于展现关系数据，外层为圆环图，可体现数据占⽐关系，内层为各个扇形间相互连接的弦，可体现关系数据force⼒导布局图。

应用AJAX+JSON+Struts2框架技术实现Web数据查询的应用示例(第2部分)

应用AJAX+JSON+Struts2框架技术实现Web数据查询的应用示例(第2部分)
window.alert("服务器由于遇到错误而不能完成该请求！"); } else if(xmlHttpRequest.status ==505){
window.alert("HTTP 版本不受支持！"); } else{
window.alert("出现了其它不知名的错误！"); } } } function showQueryStudentInfoInSomeTable(jsonAllStudentObjectFromServlet){ /** oneTRTagObject 代表<tr>标签对象 */ var oneTRTagObject; /** 首先获得表格<table>标签对象 */ var showDataTableTagObject=
设置请求的各种工作参数 */ xmlHttpRequest.open("post",requestURL, true); xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); /** * 获得操作者所输入的学生专业，并作为查询参数提交给服务器端 Servlet 程序 */ xmlHttpRequest.send("studentMajor="+
杨教授工作室，版权所有2 ，盗版必究， 2/14 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
studentMajorInputed = encodeURI(studentMajorInputed);
studentMajorInputed = encodeURI(studentMajorInputed);

echarts 双柱状 代码

echarts 双柱状 代码

ECharts是一个由百度开发的图表库，可以用于数据可视化的展示。

它支持各种常见的图表类型，包括折线图、柱状图、饼图等。

其中，双柱状图是一种常用的图表类型，用于比较两组数据的变化情况。

本文将介绍如何使用ECharts绘制双柱状图，并给出相关的代码示例。

一、准备工作在使用ECharts绘制双柱状图之前，首先需要引入ECharts的库文件。

可以通过以下方式在HTML文件中引入ECharts：```html<script src="xxx"></script>```二、绘制双柱状图1. 创建一个包含双柱状图的HTML元素，例如一个div元素：```html<div id="chart" style="width: 600px; height: 400px;"></div>```2. 使用JavaScript代码初始化ECharts，并配置双柱状图的相关参数：```javascript// 初始化ECharts实例var myChart = echarts.init(document.getElementById('chart'));// 配置图表的参数var option = {title: {text: '双柱状图示例'},tooltip: {},legend: {data:['销量', '利润']},xAxis: {data: ['产品A', '产品B', '产品C', '产品D', '产品E']},yAxis: {},series: [{name: '销量',type: 'bar',data: [150, 200, 180, 210, 220]},{name: '利润',type: 'bar',data: [50, 80, 70, 90, 100]}]};// 使用配置项显示图表myChart.setOption(option);```三、代码解析1. 创建一个包含双柱状图的HTML元素，设置其宽度和高度，以便图表可以正常显示。

echarts java 用法

echarts java 用法

echarts java 用法ECharts是由百度开发的一款基于JavaScript的数据可视化库，广泛应用于各种领域，包括金融、航空、物流等。

在Java开发中，使用ECharts可以快速地构建出美观、交互性强的数据可视化界面。

本文将介绍ECharts在Java中的用法，包括安装和配置，数据处理以及界面展示等方面。

一、安装和配置首先，在Java项目中使用ECharts，需要先引入相应的依赖包。

可以通过Maven来管理依赖，只需要在项目的pom.xml文件中添加以下配置：```<dependency><groupId>org.echarts</groupId><artifactId>echarts-java</artifactId><version>4.9.0</version></dependency>```添加完依赖后，使用Maven进行项目构建，即可将ECharts所需的Java类库集成到项目中。

二、数据处理在使用ECharts之前，通常需要对数据进行处理和组装，以便最终能够在可视化界面中展示出来。

1. 数据准备首先，需要准备好需要展示的数据。

可以从数据库中读取数据，或者通过其他途径获取数据源。

以展示柱状图为例，可以定义一个包含横轴和纵轴数据的Java类，并提供相应的getter和setter方法。

```javapublic class BarData {private List<String> xAxisData;private List<Double> yAxisData;// 省略getter和setter方法}```2. 数据组装接下来，将准备好的数据组装成ECharts可接受的数据格式。

可以通过创建一个Json对象，并设置相应的属性值来实现。

```javapublic JSONObject assembleData(BarData barData) {JSONObject json = new JSONObject();json.put("xAxis", new JSONArray(barData.getXAxisData()));json.put("yAxis", new JSONArray(barData.getYAxisData()));return json;}```这样，数据就被组装成了ECharts所需的格式。

Echarts柱状图配置详解

Echarts柱状图配置详解

Echarts柱状图配置详解柱状图⽐如做成如下所⽰图：所有的基本配置如下：// 指定图表的配置项和数据var option = {// ---- 标题 -----title: {text: '主标题',textStyle: {color: 'red'},subtext: '副标题',subtextStyle: {color: 'blue'},padding: [0, 0, 10, 100] // 位置},// ---- legend ----legend: {type: 'plain', // 图列类型，默认为 'plain'top: '1%', // 图列相对容器的位置 top\bottom\left\rightselected: {// '销量': true // 图列选择，图形加载出来会显⽰选择的图列，默认为true},textStyle: { // 图列内容样式color: '#fff', // 字体颜⾊backgroundColor: 'black' // 字体背景⾊},tooltip: { // 图列提⽰框，默认不显⽰show: true,color: 'red'},data: [ // 图列内容{name: '销量',icon: 'circle',textStyle: {color: 'red', // 单独设置某⼀个图列的颜⾊backgroundColor: '#fff' // 单独设置某⼀个图列的字体背景⾊}}]},// --- 提⽰框 ----tooltip: {show: true, // 是否显⽰提⽰框，默认为truetrigger: 'item', // 数据项图形触发axisPointer: { // 指⽰样式type: 'shadow',axis: 'auto'},padding: 5,textStyle: { // 提⽰框内容的样式color: '#fff'}},// ---- gird区域 ---gird: {show: false, // 是否显⽰直⾓坐标系⽹格top: 80, // 相对位置 top\bottom\left\rightcontainLabel: false, // gird 区域是否包含坐标轴的刻度标签tooltip: {show: true,trigger: 'item', // 触发类型textStyle: {color: '#666'}}},// ------ X轴 ------xAxis: {show: true, // 是否显⽰position: 'bottom', // x轴的位置offset: 0, // x轴相对于默认位置的偏移type: 'category', // 轴类型，默认为 'category'name: '⽉份', // 轴名称nameLocation: 'end', // 轴名称相对位置nameTextStyle: { // 坐标轴名称样式color: 'red',padding: [5, 0, 0, -5]},nameGap: 15, // 坐标轴名称与轴线之间的距离nameRotate: 0, // 坐标轴名字旋转axisLine: { // 坐标轴轴线show: true, // 是否显⽰symbol: ['none', 'arrow'], // 是否显⽰轴线箭头symbolSize: [8, 8], // 箭头⼤⼩symbolOffset: [0, 7], // 箭头位置// ------ 线 ---------lineStyle: {color: 'blue',width: 1,type: 'solid'}},axisTick: { // 坐标轴刻度show: true, // 是否显⽰inside: true, // 是否朝内length: 3, // 长度lineStyle: { // 默认取轴线的样式color: 'red',width: 1,type: 'solid'}},axisLabel: { // 坐标轴标签show: true, // 是否显⽰inside: false, // 是否朝内rotate: 0, // 旋转⾓度margin: 5, // 刻度标签与轴线之间的距离color: 'red' // 默认取轴线的颜⾊},splitLine: { // gird区域中的分割线show: false, // 是否显⽰lineStyle: {// color: 'red',// width: 1,// type: 'solid'}},splitArea: { // ⽹格区域show: false// 是否显⽰，默认为false},data: ['1⽉', '2⽉', '3⽉', '4⽉', '5⽉', '6⽉', '7⽉', '8⽉', '9⽉', '10⽉', '11⽉', '12⽉'] },// ------ y轴 ----------yAxis: {show: true, // 是否显⽰position: 'left', // y轴位置offset: 0, // y轴相对于默认位置的偏移type: 'value', // 轴类型，默认为 ‘category’name: '销量', // 轴名称nameLocation: 'end', // 轴名称相对位置valuenameTextStyle: { // 坐标轴名称样式color: '#fff',padding: [5, 0, 0, 5] // 坐标轴名称相对位置},nameGap: 15, // 坐标轴名称与轴线之间的距离nameRotate: 270, // 坐标轴名字旋转axisLine: { // 坐标轴轴线show: true, // 是否显⽰// ----- 箭头 -----symbol: ['none', 'arrow'], // 是否显⽰轴线箭头symbolSize: [8, 8], // 箭头⼤⼩symbolOffset: [0, 7], // 箭头位置// ----- 线 -------lineStyle: {color: 'blue',width: 1,type: 'solid'}},axisTick: { // 坐标轴的刻度show: true, // 是否显⽰inside: true, // 是否朝内length: 3, // 长度lineStyle: {color: 'red', // 默认取轴线的颜⾊width: 1,type: 'solid'}},axisLabel: { // 坐标轴的标签show: true, // 是否显⽰inside: false, // 是否朝内rotate: 0, // 旋转⾓度margin: 8, // 刻度标签与轴线之间的距离color: 'red', // 默认轴线的颜⾊},splitLine: { // gird 区域中的分割线show: true, // 是否显⽰lineStyle: {color: '#666',width: 1,type: 'dashed'}},splitArea: { // ⽹格区域show: false// 是否显⽰，默认为false}},// ------- 内容数据 -------series: [{name: '销量', // 序列名称type: 'bar', // 类型legendHoverLink: true, // 是否启⽤图列 hover 时的联动⾼亮label: { // 图形上的⽂本标签show: false,position: 'insideTop', // 相对位置rotate: 0, // 旋转⾓度color: '#eee'},itemStyle: { // 图形的形状color: 'blue',barBorderRadius: [18, 18, 0 ,0]},barWidth: 20, // 柱形的宽度barCategoryGap: '20%', // 柱形的间距data: [3000, 4000, 4200, 4500, 6000, 5600, 4500, 5020, 4500, 5400, 4300, 1200] }]};html代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts</title><!-- 引⼊ echarts.js --><script src="./echarts4.x.js"></script><script type="text/javascript" src="./zhuzhangtu.js"></script></head><!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom --><div id="main" style="width: 600px;height:400px;margin: 0 auto"></div> <script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 使⽤刚指定的配置项和数据显⽰图表。

java项目使用Echarts做柱状堆叠图，包含点击事件

java项目使用Echarts做柱状堆叠图，包含点击事件

java项⽬使⽤Echarts做柱状堆叠图，包含点击事件基础知识请⾃⾏百度查看，以下直接贴出实现代码：<%@ page pageEncoding="UTF-8"%><!DOCTYPE html><html><head><title>ECharts</title><% String year = request.getParameter("riskYear");String actionType = request.getParameter("actionType");%></head><body><div id="main" style="height:153px;"></div><!-- ECharts单⽂件引⼊ --><script src="/ri/common/echarts/dist/echarts-all.js"></script><script src="/ri/common/echarts/dist/echarts.js"></script><script src="/ri/common/echarts/dist/jquery-1[1].2.6.pack.js" type="text/javascript"></script><script type="text/javascript">var mainDiv = document.getElementById('main');var option = {grid : {x: 30,y: 30,x2: 0,y2: 10},tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指⽰器，坐标轴触发有效type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend: {data:[]},toolbox: {show : false,orient: 'vertical',x: 'right',y: 'center',feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},restore : {show: true},saveAsImage : {show: true}}},calculable : true,xAxis : [{type : 'category',axisLabel : {show:false,interval:0},data : [] //'周⼀','周⼆','周三','周四','周五','周六','周⽇'}],yAxis : [{type : 'value'}],series : []};//采⽤ajax异步请求数据$.ajax({type:'post',url:'<%=request.getContextPath() %>/EchartsServlet?year=<%= year%>&actionType=<%= actionType%>', dataType:'json',success:function(result){if(result.length>0){//将返回的category和series对象赋值给options对象内的category和seriesoption.xAxis[0].data = result[0].category;option.legend.data = result[0].legend;option.color = result[0].legendColorList;var series_arr=result[0].series;for(var i=0;i<series_arr.length;i++){option.series[i] = series_arr[i];option.series[i].stack = 'risk';}if(result[0].category.length<7){mainDiv.style.width = 680 ;}else{mainDiv.style.width = result[0].category.length*100;}var myChart = echarts.init(mainDiv);myChart.setOption(option);// 路径配置require.config({paths: {echarts: '/ri/common/echarts/dist'}});// 使⽤require(['echarts','echarts/chart/bar' // 使⽤柱状图就加载bar模块，按需加载],function (ec) {var ecConfig = require('echarts/config');function eConsole(param) {if (typeof param.seriesIndex != 'undefined') {var url = '/ri/NRCSAManagerController.do?action=getRiskScoreList'+'&actionType=<%= actionType%>&year=<%= year%>'+'&orgID='+result[0].orgId[param.dataIndex]+'&clickIndex'+(param.seriesIndex+1);window.open(url,'','width=800,height=480,resizable=yes');}}myChart.on(ecConfig.EVENT.CLICK, eConsole);myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);})}},error:function(errMsg){alert("不好意思，图表请求数据失败啦!");}});</script></body></html>后台代码实现如下：package com.riskintegrator.servlet.report;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import erData;import com.riskintegrator.slsb.lem.LEMBD;import com.riskintegrator.slsb.report.EchartForm;import com.riskintegrator.slsb.report.EchartRiskBD;import com.riskintegrator.slsb.report.SeriesForm;import edu.emory.mathcs.backport.java.util.Collections;public class EchartsServlet extends HttpServlet {private static final long serialVersionUID = -6497480146173707253L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String jsonString = "";try {HttpSession session = request.getSession(true);UserData udt = (UserData)session.getAttribute("user");String orgID = udt.getorgID();String year = request.getParameter("year");String actionType = request.getParameter("actionType");LEMBD LBD = new LEMBD();String companyOrgId = LBD.getCompanyId(orgID);EchartRiskBD BD = new EchartRiskBD();List<EchartForm> riskOrgList = BD.getAllRiskMessageByCondition(year,companyOrgId);if(riskOrgList.size() == 0){JSONArray json = new JSONArray();jsonString = json.toString();}else if("riskAssess".equalsIgnoreCase(actionType)){jsonString = doriskAssess(riskOrgList);}else if("riskKPI".equalsIgnoreCase(actionType)){jsonString = doriskKPI(riskOrgList);}else if("Assessment".equalsIgnoreCase(actionType)){jsonString = doAssessment(riskOrgList);}else if("riskControl".equalsIgnoreCase(actionType)){jsonString = doriskControl(riskOrgList);}} catch (Exception e) {}response.setContentType("text/html;charset=utf-8");PrintWriter out=response.getWriter();out.println(jsonString);out.flush();out.close();}public String doriskAssess(List<EchartForm> riskOrgList) throws Exception{//{"低","中","较⾼","⾼"}List<String> legendList = new ArrayList<String>();//设置legend颜⾊List<String> legendColorList = new ArrayList<String>();//category--orgNameList<String> categoryList = new ArrayList<String>();//orgidList<String> orgIdList = new ArrayList<String>();//seriesList<SeriesForm> seriesList = new ArrayList<SeriesForm>();//设置legend数组legendList.add("低"); //这⾥的名称必须和series的每⼀组series的name保持⼀致legendList.add("中");legendList.add("较⾼");legendList.add("⾼");//设置颜⾊legendColorList.add("#0C0");legendColorList.add("#FFC");legendColorList.add("#FC3");legendColorList.add("#F00");SeriesForm series1 = new SeriesForm();series1.setId(1);series1.setName("低");series1.setType("bar");List<Integer> seriesData1 = new ArrayList<Integer>();SeriesForm series2 = new SeriesForm();series2.setId(2);series2.setName("中");series2.setType("bar");List<Integer> seriesData2 = new ArrayList<Integer>();SeriesForm series3 = new SeriesForm();series3.setId(3);series3.setName("较⾼");series3.setType("bar");List<Integer> seriesData3 = new ArrayList<Integer>();SeriesForm series4 = new SeriesForm();series4.setId(4);series4.setName("⾼");series4.setType("bar");List<Integer> seriesData4 = new ArrayList<Integer>();EchartsComparator comparator=new EchartsComparator("riskAssess");Collections.sort(riskOrgList, comparator);for(EchartForm form : riskOrgList){orgIdList.add(form.getOrgid());//机构ID//加⼊categorycategoryList.add(form.getOrgName());//机构名称//加⼊数据值series序列数组这⾥提供为了效果只提供⼀组series数据好了seriesData1.add(Integer.parseInt(form.getSCORE_LEVEL1()));//风险评估--低 seriesData2.add(Integer.parseInt(form.getSCORE_LEVEL2()));//风险评估--中 seriesData3.add(Integer.parseInt(form.getSCORE_LEVEL3()));//风险评估--较⾼ seriesData4.add(Integer.parseInt(form.getSCORE_LEVEL4()));//风险评估--⾼ }series1.setData(seriesData1);series2.setData(seriesData2);series3.setData(seriesData3);series4.setData(seriesData4);seriesList.add(series1);seriesList.add(series2);seriesList.add(series3);seriesList.add(series4);JSONArray json = new JSONArray();JSONObject jo = new JSONObject();jo.put("legend", legendList);jo.put("legendColorList", legendColorList);jo.put("orgId", orgIdList);jo.put("category", categoryList);jo.put("series", seriesList);json.add(jo);return json.toString();}public String doriskKPI(List<EchartForm> riskOrgList) throws Exception{//{"低","中","较⾼","⾼"}List<String> legendList = new ArrayList<String>();//设置legend颜⾊List<String> legendColorList = new ArrayList<String>();//category--orgNameList<String> categoryList = new ArrayList<String>();//orgidList<String> orgIdList = new ArrayList<String>();//seriesList<SeriesForm> seriesList = new ArrayList<SeriesForm>();//设置legend数组legendList.add("低"); //这⾥的名称必须和series的每⼀组series的name保持⼀致 legendList.add("中");legendList.add("较⾼");legendList.add("⾼");//设置颜⾊legendColorList.add("#0C0");legendColorList.add("#FFC");legendColorList.add("#FC3");legendColorList.add("#F00");SeriesForm series1 = new SeriesForm();series1.setId(1);series1.setName("低");series1.setType("bar");List<Integer> seriesData1 = new ArrayList<Integer>();SeriesForm series2 = new SeriesForm();series2.setId(2);series2.setName("中");series2.setType("bar");List<Integer> seriesData2 = new ArrayList<Integer>();SeriesForm series3 = new SeriesForm();series3.setId(3);series3.setName("较⾼");series3.setType("bar");List<Integer> seriesData3 = new ArrayList<Integer>();SeriesForm series4 = new SeriesForm();series4.setId(4);series4.setName("⾼");series4.setType("bar");List<Integer> seriesData4 = new ArrayList<Integer>();EchartsComparator comparator=new EchartsComparator("riskKPI");Collections.sort(riskOrgList, comparator);for(EchartForm form : riskOrgList){orgIdList.add(form.getOrgid());//机构ID//加⼊categorycategoryList.add(form.getOrgName());//机构名称//加⼊数据值series序列数组这⾥提供为了效果只提供⼀组series数据好了seriesData1.add(Integer.parseInt(form.getKRI_LEVEL1()));//风险指标--低seriesData2.add(Integer.parseInt(form.getKRI_LEVEL2()));//风险指标--中seriesData3.add(Integer.parseInt(form.getKRI_LEVEL3()));//风险指标--较⾼seriesData4.add(Integer.parseInt(form.getKRI_LEVEL4()));//风险指标--⾼}series1.setData(seriesData1);series2.setData(seriesData2);series3.setData(seriesData3);series4.setData(seriesData4);seriesList.add(series1);seriesList.add(series2);seriesList.add(series3);seriesList.add(series4);JSONArray json = new JSONArray();JSONObject jo = new JSONObject();jo.put("legend", legendList);jo.put("orgId", orgIdList);jo.put("legendColorList", legendColorList);jo.put("category", categoryList);jo.put("series", seriesList);json.add(jo);return json.toString();}public String doAssessment(List<EchartForm> riskOrgList) throws Exception{//{"问题缺陷"}List<String> legendList = new ArrayList<String>();//设置legend颜⾊List<String> legendColorList = new ArrayList<String>();//category--orgNameList<String> categoryList = new ArrayList<String>();//orgidList<String> orgIdList = new ArrayList<String>();//seriesList<SeriesForm> seriesList = new ArrayList<SeriesForm>();//设置legend数组legendList.add("问题缺陷"); //这⾥的名称必须和series的每⼀组series的name保持⼀致 //设置颜⾊legendColorList.add("#F63");SeriesForm series1 = new SeriesForm();series1.setId(1);series1.setName("问题缺陷");series1.setType("bar");List<Integer> seriesData1 = new ArrayList<Integer>();EchartsComparator comparator=new EchartsComparator("Assessment");Collections.sort(riskOrgList, comparator);for(EchartForm form : riskOrgList){orgIdList.add(form.getOrgid());//机构ID//加⼊categorycategoryList.add(form.getOrgName());//机构名称//加⼊数据值series序列数组这⾥提供为了效果只提供⼀组series数据好了seriesData1.add(Integer.parseInt(form.getISS_LEVEL1()));//检查评价--问题缺陷 }series1.setData(seriesData1);seriesList.add(series1);JSONArray json = new JSONArray();JSONObject jo = new JSONObject();jo.put("legend", legendList);jo.put("orgId", orgIdList);jo.put("legendColorList", legendColorList);jo.put("category", categoryList);jo.put("series", seriesList);json.add(jo);return json.toString();}public String doriskControl(List<EchartForm> riskOrgList) throws Exception{//{"有效","失效"}List<String> legendList = new ArrayList<String>();//设置legend颜⾊List<String> legendColorList = new ArrayList<String>();//category--orgNameList<String> categoryList = new ArrayList<String>();//orgidList<String> orgIdList = new ArrayList<String>();//seriesList<SeriesForm> seriesList = new ArrayList<SeriesForm>();//设置legend数组legendList.add("有效"); //这⾥的名称必须和series的每⼀组series的name保持⼀致 legendList.add("失效");//设置颜⾊legendColorList.add("#0C0");legendColorList.add("#F63");SeriesForm series1 = new SeriesForm();series1.setId(1);series1.setName("有效");series1.setType("bar");List<Integer> seriesData1 = new ArrayList<Integer>();SeriesForm series2 = new SeriesForm();series2.setId(2);series2.setName("失效");series2.setType("bar");List<Integer> seriesData2 = new ArrayList<Integer>();EchartsComparator comparator=new EchartsComparator("riskControl");Collections.sort(riskOrgList, comparator);for(EchartForm form : riskOrgList){orgIdList.add(form.getOrgid());//机构ID//加⼊categorycategoryList.add(form.getOrgName());//机构名称//加⼊数据值series序列数组这⾥提供为了效果只提供⼀组series数据好了seriesData1.add(Integer.parseInt(form.getCM_LEVEL1()));//控制监测--有效seriesData2.add(Integer.parseInt(form.getCM_LEVE2()));//控制监测--失效}series1.setData(seriesData1);series2.setData(seriesData2);seriesList.add(series1);seriesList.add(series2);JSONArray json = new JSONArray();JSONObject jo = new JSONObject();jo.put("legend", legendList);jo.put("orgId", orgIdList);jo.put("legendColorList", legendColorList);jo.put("category", categoryList);jo.put("series", seriesList);json.add(jo);return json.toString();}}。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

说明：本实例使用的是echart3，jquery1.8.11）struts的web.xml配置代码如下：<?xml version="1.0"encoding="UTF-8"?><web-app xmlns:xsi="/2001/XMLSchema-instance"xmlns="/xml/ns/javaee"xsi:schemaLocation="/xml/ns/javaee/xml/ns/javaee/web-app_3_0.xsd"id="WebApp_ID"version="3.0"><display-name>struts2</display-name><welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list><!-- struts2配置 --><filter><filter-name>struts2</filter-name><filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecu teFilter</filter-class></filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping></web-app>2）struts.xml代码<?xml version="1.0"encoding="UTF-8"?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN""/dtds/struts-2.3.dtd"><struts><!-- <package name="default"namespace="/student" extends="struts-default">配置Action<action name="studentAdd" class="struts2.action.StudentController" method="studentAdd">根据我们业务方法返回的字符串来定义跳转的视图<result name="success"></result><result name="error"/><result name="none"/></action></package> --><package name="tb"namespace="/echarts"extends="struts-default"><!-- 配置Action --><action name="zzt"class="struts2.action.EchartsAction"method="getZzt"> <!-- 根据我们业务方法返回的字符串来定义跳转的视图 --><result name="success"></result><result name="error"/><result name="none"/></action></package><!-- Add packages here --></struts>3）EchartsAction ：package struts2.action;import common.controller.BaseController;publicclass EchartsAction extends BaseController{/*private String json = "[{\"鞋\":\"80\"},{\"衬衫\":\"50\"},{\"外套\":\"75\"},{\"牛仔裤\":\"100\"}]";*/private String json= "[{\"item\":\"鞋\",\"saleNum\":\"80\"},{\"item\":\"衬衫\",\"saleNum\":\"100\"},"+ "{\"item\":\"外套\",\"saleNum\":\"90\"},{\"item\":\"牛仔裤\",\"saleNum\":\"70\"}]";publicvoid getZzt(){try {getPrintWriter().print(json);} catch (Exception e) {e.printStackTrace();}}}4)页面源代码：<%@page language="java"contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><%String contextPath = request.getContextPath();%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><meta charset="utf-8"/><title></title><script type="text/javascript"src="resources/js/jquery-1.8.1.min.js"></s cript><script type="text/javascript"src="resources/js/echarts.js"></script> </head><style type="text/css">td{border-right:1px solid #555 border-bottom:1px solid #555; padding:6px 10px 6px 10px;}</style><script type="text/javascript">var contextPath = '<%=contextPath%>';$(function(){loadImage();});var option = {title: {text: '深圳月最低生活费组成（单位:元）',subtext: 'From ExcelHome',sublink: '/1341556070/AjQH99che'},tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指示器，坐标轴触发有效type : 'shadow'// 默认为直线，可选为：'line' | 'shadow'},formatter: function (params) {var tar = params[1];return + '<br/>' + tar.seriesName + ' : ' + tar.value;}},grid: {left: '3%',right: '1%',bottom: '3%',containLabel: true},xAxis: {type : 'category',splitLine: {show:false},data:[],},yAxis: {type : 'value'},series : [{name: '辅助',type: 'bar',stack: '总量',itemStyle: {normal: {barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)'},emphasis: {barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)'}},data: [0, 0, 0, 0, 0, 0]},{name: '销量',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'inside'}},data:[],barWidth:40}]};function loadImage(){var myChart = echarts.init(document.getElementById('pieCharts'),'macarons');var url= contextPath + "/echarts/zzt?random=" + new Date().getTime();jQuery.ajax({url: url,dataType:"json",type:"post",success:function(data){for(var i=0;i<data.length;i++){option.xAxis.data.push(data[i].item);(option.series[1].data).push(parseInt(data[i].saleNum));}myChart.setOption(option);},error:function(data){alert("网络错误！");}});}</script><body><div id="pieCharts"style="width:600px;height:400px;"></div></body> </html>。