还请看我娓娓写来。
1、第一步当然还是进入你所在项目的文件夹。
2、第二步使用npm安装你所需要用到的组件，
》使用以下命令安装echarts组件
npm install echarts
》安装好echarts后，还需要安装echarts3d图形所需的组件，echarts-gl。使用以下命令安装即可。假设你不需要制作3D的图表，则不需要安装。
npm install echarts-gl
安装好了之后，你就可以在你的node_modules文件夹内找到echarts和echart-gl文件夹了。
而且在你的package.json文件里面也可以找到这个配置
那么echarts和我们需要的echarts-gl就安装好了，现在开始写demo啦
3.我们需要在页面的script中引用
4.写一个div装echarts实例吧。
5、给这个实例设置一个css样式，给它设置宽高，这一步很重要
6、实例出一个柱状图吧。
你可以写一个方法调用，你这个实例的方法，然后就可以看到效果了。具体的设置建议看echarts官网的这个GL的属性说明。
贴上最后的效果图：
好了，今天的文章就告一段落，如果您有好的建议，请在下方留言。欢迎订阅我们哦~
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处理一下就可以了。
1.进行表格数据的变形把原始表格数据进行转换为如图的形式。数据与数据之间有间隔，和图表的柱形一样有梯度。2.图表的制作选中变形的数据区域——点击插入——推荐的图表。3.点击所有图表——堆积柱形图。4.数据柱子——设置数据系列格式——分类间距（调整为0）。5.添加标题和数据来源——根据表格需要，添加标题，标题尽量简洁，且能够反映表格内容，突出你想表达的观点。字体（衬线字体：线条粗细不同，适合小号字体使用，投影时清晰度不高，无衬线字体：粗细相同，更适合大号字体时使用，投影时美观）中文字体：微软雅黑，黑体6.添加背景设——以单色调为主。
