echarts怎么实现堆积柱状图，数据来源数据库

1.进行表格数据的变形把原始表格数据进行转换为如图的形式。数据与数据之间有间隔，和图表的柱形一样有梯度。2.图表的制作选中变形的数据区域——点击插入——推荐的图表。3.点击所有图表——堆积柱形图。4.数据柱子——设置数据系列格式——分类间距（调整为0）。5.添加标题和数据来源——根据表格需要，添加标题，标题尽量简洁，且能够反映表格内容，突出你想表达的观点。字体（衬线字体：线条粗细不同，适合小号字体使用，投影时清晰度不高，无衬线字体：粗细相同，更适合大号字体时使用，投影时美观）中文字体：微软雅黑，黑体6.添加背景设——以单色调为主。

图显IP：

只要从数据库中读取数据出来，然后循环记录，把数据填入jfreechart中的数据集就可以啦！

ds = this.getDataSource(request,"ds")

conn = ds.getConnection()

ReportInfoBean infoBean = CommonUtil.getReportInfo(conn, SysConfig.REPORT_TYPE_LIVEDENSITY)

String sqlParam = ""

if(sels == null || sels.equals("")){

sqlParam = infoBean.getControlCamIDs()

}else{

sqlParam = sels

}

url = SysConfig.WEB_APPNAME_PATH+"reportLiveDensityAction.do?method=toSearchRecord&begintime="+beginTime+"&endtime="+endTime+"&sels="+sels

projectName = infoBean.getProjectName()

dataOper.setCon(conn)

String sql = "exec Sp_PeopleDensity '"

+userInfo.getUserID()+"'," //用户ID

+"'','"//工程ID

+beginTime+"','"//开始日期

+endTime+"','"//结束日期

+"00:"+infoBean.getXinterval()+":00"+"',"//时间间隔

+infoBean.getMultiple()+","//倍数

+"0"+","//0表示所有出入口，1表示部分出入口(此参数在该存储过程中暂无用)

+infoBean.getAlarmNum()+","//警戒线

+"'"+sqlParam+"'"//镜头号

System.out.println("sql="+sql)

ReportChartFactory factory = new ReportChartFactory()

List list = dataOper.queryToList(sql)

factory.generateLiveDensityMap(list)

JFreeChart jfreechart = factory.createLiveDensityChart(factory.createLiveDensityDataset(list,confBean),infoBean,confBean)

ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection())

ChartUtilities.saveChartAsJPEG(new File(filePath+fileName),jfreechart,width,height,info)//宽1000，高600

useMapStr = ChartUtilities.getImageMap(fileName,info)

useMapStr = factory.replaceImageMap(useMapStr)

public class CategoryItemChart {

public static String generateBarChart(HttpSession session, PrintWriter pw,int w, int h,ArrayList list) {

String filename = null

try {

CategoryDataset dataset = createDataset(list)

JFreeChart chart = ChartFactory.createBarChart(

"",//图表标题

"",//X轴标题

"",//Y轴标题

dataset,//数据集合

PlotOrientation.VERTICAL,//图表显示方向（水平、垂直）

true,//是否使用图例

true,//是否使用工具提示

false//是否为图表增加URL

)

/*------------配置图表属性--------------*/

chart.setBackgroundPaint(Color.white)// 1,设置整个图表背景颜色

CategoryPlot plot = chart.getCategoryPlot()/*------------设定Plot参数-------------*/

plot.setBackgroundPaint(Color.white)// 2,设置详细图表的显示细节部分的背景颜色

plot.setDomainGridlinePaint(Color.black)// 3,设置垂直网格线颜色

plot.setDomainGridlinesVisible(false)// 4,设置是否显示垂直网格线

plot.setRangeGridlinePaint(Color.yellow)// 5,设置水平网格线颜色

plot.setRangeGridlinesVisible(false)//6,设置是否显示水平网格线

/*---------将所有数据转换为整数形式---------*/

final NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis()

rangeAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits())

/*---------设置是否在柱图的状态条上显示边框----*/

CategoryItemRenderer renderer = (CategoryItemRenderer) plot.getRenderer()

BarRenderer render = (BarRenderer) plot.getRenderer()

// render.setItemMargin(0.0)

// render.setMinimumBarLength(0.0)

/*---------设置状态条颜色的深浅渐变-----------*/

GradientPaint gp0 = new GradientPaint(0.0f, 0.0f, new Color(255,200, 80), 0.0f, 0.0f, new Color(255, 255, 40))

GradientPaint gp1 = new GradientPaint(0.0f, 0.0f, new Color(50,255, 50), 0.0f, 0.0f, new Color(100, 255, 100))

GradientPaint gp2 = new GradientPaint(0.0f, 0.0f, Color.red, 0.0f,0.0f, new Color(255, 100, 100))

GradientPaint gp3 = new GradientPaint(0.0f, 0.0f, new Color(108,108, 255), 0.0f, 0.0f, new Color(150, 150, 200))

renderer.setSeriesPaint(0, gp0)

renderer.setSeriesPaint(1, gp1)

renderer.setSeriesPaint(2, gp2)

renderer.setSeriesPaint(3, gp3)

/*

*

* 解决柱状体与图片边框的间距问题

*

*

* */

/*------设置X轴标题的倾斜程度----*/

CategoryAxis domainAxis = plot.getDomainAxis()

domainAxis.setCategoryLabelPositions(CategoryLabelPositions.createUpRotationLabelPositions(Math.E / 6.0))

/*------设置柱状体与图片边框的左右间距--*/

domainAxis.setLowerMargin(0.06)

domainAxis.setUpperMargin(0.06)

/*------设置柱状体与图片边框的上下间距---*/

ValueAxis rAxis = plot.getRangeAxis()

rAxis.setUpperMargin(0.3)

rAxis.setLowerMargin(0.3)

/*---------设置每一组柱状体之间的间隔---------*/

render.setItemMargin(0.01)

/*

*

* 解决柱状体与图片边框的间距问题

*

*

* */

/*

*

*

* 解决JFREECHART的中文显示问题

*

*

* */

/*----------设置消除字体的锯齿渲染（解决中文问题）--------------*/

chart.getRenderingHints().put(RenderingHints.KEY_TEXT_ANTIALIASING,RenderingHints.VALUE_TEXT_ANTIALIAS_OFF)

/*----------设置标题字体--------------------------*/

TextTitle textTitle = chart.getTitle()

textTitle.setFont(new Font("黑体", Font.PLAIN, 20))

/*------设置X轴坐标上的文字-----------*/

domainAxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 11))

/*------设置X轴的标题文字------------*/

domainAxis.setLabelFont(new Font("宋体", Font.PLAIN, 12))

/*------设置Y轴坐标上的文字-----------*/

rAxis.setTickLabelFont(new Font("sans-serif", Font.PLAIN, 14))

/*------设置Y轴的标题文字------------*/

rAxis.setLabelFont(new Font("黑体", Font.PLAIN, 12))

/*---------设置柱状体上的显示的字体---------*/

renderer.setBaseItemLabelFont(new Font("宋体", Font.PLAIN, 12))

renderer.setBaseItemLabelGenerator(new LabelGenerator(0.0))

renderer.setBaseItemLabelsVisible(true)

/*

*

*

* 解决JFREECHART的中文显示问题

*

*

* */

/*------得到chart的保存路径----*/

ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection())

filename = ServletUtilities.saveChartAsPNG(chart, w, h, info,session)

/*------使用printWriter将文件写出----*/

ChartUtilities.writeImageMap(pw, filename, info, true)

pw.flush()

} catch (Exception e) {

System.out.println("Exception - " + e.toString())

e.printStackTrace(System.out)

filename = "public_error_500x300.png"

}

return filename

}

/*-------------设置柱状体顶端的数据显示--------------*/

static class LabelGenerator implements CategoryItemLabelGenerator {

private double threshold

public LabelGenerator(double threshold) {

this.threshold = threshold

}

public String generateLabel(CategoryDataset dataset, int row, int column) {

String result = null

final Number value = dataset.getValue(row, column)

if (value != null) {

final double v = value.doubleValue()

if (v >this.threshold) {

result = value.toString()

}

}

return result

}

public String generateRowLabel(CategoryDataset dataset, int row) {

return null

}

public String generateColumnLabel(CategoryDataset dataset, int column) {

return null

}

}

/*-----------数据封装-------------*/

private static CategoryDataset createDataset(ArrayList list) {

String s1 = "1"

String s2 = "2"

String c1 = "1"

String c2 = "2"

DefaultCategoryDataset dataset = new DefaultCategoryDataset()

dataset.setValue(44, s1, c1)

dataset.setValue(48, s2, c2)

return dataset

}

}

比较完整的一个得到柱图的代码，保存路径是临时文件，怎么从数据库取值应该会吧。把dataset处理一下就可以了。

---