JAVA之struts2+ajax实现echats柱状图

合集下载

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><div id="main" style="width: 800px; height: 300px"></div><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开发工具版本)

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开发条形图、柱形图、饼图生成

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的网上汽车配件商城的设计与实现

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

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做曲线图柱状图数据统计.

用于生成图象的帮助提示，不同类型图表对应不同类型的工具提示类
下面以柱状图和饼图以及折线图为例，介绍图形创建方法。
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参考⼿册可知，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动态获取后端数据（条形图、饼图）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)'}}}]};// 使⽤刚指定的配置项和数据显⽰图表。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
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><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="tb"namespace="/echarts"extends="struts-default"><action name="zzt"class="struts2.action.EchartsAction"method="getZzt"> <result name="success"></result><result name="error"/><result name="none"/></action></package></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>。