首先需要准备两个必须的文件
echarts-convert和phantomjs
phantomjs官网
echarts-convert在gitee上的，有点区别，不知道效果一样吗
也可以使用我准备好的网盘下载
网盘连接：https://pan.baidu.com/s/1zZHtKWju9AjP4a_e_K3k5g?pwd=2rzj
提取码：2rzj
说明：
1. 在echarts-convert中的目录结构如下
2. 其中echarts-convert.js里面的第四行的config可以修改
jquery可以修改为最新版本，也可以替换成自己需要的版本
echarts3也可以替换成自己需要的版本
在这个目录下的jquery-1.9.1.min.js是之前修改前的原js文件
echarts-all4.js也是之前的js文件，echarts的js建议使用新版本的，不然会和前端显示有出入
3. echarts-convert只需要修改echarts-convert.js文件即可，其他的无需在修改了
解压配置环境变量
只需要配置phantomjs的就可以了
如：在环境变量path中配置 D:\echarts-convert\phantomjs-2.1.1-windows\bin
使用
我这边使用的java，使用其他的言语也是可以的，只需要调用cmd命令即可
使用依赖
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>ECharts</artifactId>
<version>3.0.0.6</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.9</version>
</dependency>
- 后端和前端一样都可以使用json的方式
import com.github.abel533.echarts.Graphic;
import com.github.abel533.echarts.Grid;
import com.github.abel533.echarts.Legend;
import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.axis.*;
import com.github.abel533.echarts.code.*;
import com.github.abel533.echarts.series.Bar;
import com.github.abel533.echarts.series.Line;
import com.github.abel533.echarts.series.Pie;
import com.github.abel533.echarts.series.Series;
import com.github.abel533.echarts.style.GraphicStyle;
import com.github.abel533.echarts.style.ItemStyle;
import com.github.abel533.echarts.style.LineStyle;
import com.github.abel533.echarts.style.itemstyle.Normal;
public static void main(String[] args) {
Option option = new Option();
graphic(option, "测试");
grid(option);
List<String> chartNameList = new ArrayList<>();
List<Series> seriesList = new ArrayList<>();
List<String> colorList= new ArrayList<>();
chartNameList.add("测试");
// echarts默认样式只有"#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"九种
colorList.add("#5470c6");// 只支持：#5470c6
legend(option, chartNameList, true/*false*/);
List datas = new ArrayList();
datas.add(123);// 可以只是数据或者是一个对象，对象是要求{name: '名字', value: '值'}，这样的形式
seriesList.add(series("测试", "bar", datas, null, "solid", 1));// 0是左轴，1是右轴，记不清了
option.setSeries(seriesList);
option.setColor(colorList);
// 到此设置好了一个option的对象
String s = new Gson().toJson(option);// 将这个对象生成字符串，不确定fastjson可不可以使用，我这边使用的是gson
// 我这边还添加了个不允许中间没数据的时候断开
s = replaceAndAddStr(s);
// 开始生成图片
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("title", "测试");
resultMap.put("path", "测试");
generateEChart(option, resultMap);
}
// 生成图片
public String generateEChart(String options, Map<String, Object> resultMap) {
//获取时间
String dataPath = writeFile(options, resultMap.get("title") + "", resultMap.get("path") + "");// 写入json到指定目录
String fileName = resultMap.get("title") + ".png" ;// 图片名称
String path = this.savePath + resultMap.get("path") + fileName;// 图片保存路径
Process process;
BufferedReader input = null;
try {
File file = new File(path);// 文件路径（路径+文件名）
if (!file.exists()) {// 文件不存在则创建文件，先创建目录
File dir = new File(file.getParent());
dir.mkdirs();
file.createNewFile();
}
// 调用windows命令
// JSpath是对应的echarts-convert中的echarts-convert.js文件目录
// 如D:/echarts-convert/echarts-convert/echarts-convert.js
String cmd = String.format("phantomjs %s -infile %s -outfile %s", this.JSpath, dataPath, path);
System.out.println(cmd);// 生成的cmd命令可以复制出来手动在命令行窗口中使用，不过要确保json文件存在哦
process = Runtime.getRuntime().exec(cmd);
input = new BufferedReader(new InputStreamReader(process.getInputStream()));
String line;
while ((line = input.readLine()) != null) {
System.out.println("line++++++++++++++++++++" + line);
}
try {
process.waitFor();
} catch (InterruptedException e) {
e.printStackTrace();
}
} catch (IOException e) {
e.printStackTrace();
} finally {
// 如果使用的springboot web启动项目， 使用 destroy 之后无法手动删除图片，所以不调用destroy方法
// if (process != null) {
// process.destroy();
// }
File file = new File(dataPath);
file.delete();// 删除json文件
if (input != null) {
try {
input.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return path;
}
// 写入json文件
public String writeFile(String options, String title, String savePath) {
String dataPath = this.savePath + savePath + title + ".json";// option需要保存的json文件路径
BufferedWriter out = null;
try {
File writename = new File(dataPath); // 相对路径，如果没有则要建立一个新的output.txt文件
if (!writename.exists()) { // 文件不存在则创建文件，先创建目录
File dir = new File(writename.getParent());
dir.mkdirs();
writename.createNewFile(); // 创建新文件
}
out = new BufferedWriter(new FileWriter(writename));
out.write(options); // \r\n 即为换行
} catch (IOException e) {
e.printStackTrace();
} finally {
if (out != null) {
try {
out.flush(); // 把缓存区内容压入文件
out.close(); // 最后记得关闭文件
} catch (IOException e) {
e.printStackTrace();
}
}
}
return dataPath;
}
// 将一个option的一个不存在的数据使用字符串替换的方式进行生成
private String replaceAndAddStr(String json) {
String s = json.replaceAll("\"type\":\"line\",", "\"type\":\"line\",\"connectNulls\":true,");
s = s.replace(",\"xAxis\":[{", ",\"xAxis\":[{\"axisLabel\":{\"showMaxLabel\":true},");
return s;
}
// 由于这些和前端的是一致的，只不过是实现起来不一致，所以不在多赘述
// 生成option中的graphic
private void graphic(Option option, String text) {
// 无法设置图片,暂时没有解决图片的问题
Graphic graphic = new Graphic();
graphic.setType(GraphicType.text);
graphic.setSilent(true);
graphic.setZ(1);
graphic.setBottom("20px");
graphic.setRight("20px");
graphic.setStyle(new GraphicStyle().fill("#00000080").text(text));
option.setGraphic(graphic);
// Graphic graphicImg = new Graphic();
// graphicImg.setType(GraphicType.valueOf("image"));
// graphicImg.setZ(1);
// graphicImg.setId("logo");
// graphicImg.setRight("center");
// graphicImg.setBottom("40%");
// graphicImg.setBouding("all");
// graphicImg.setStyle(new GraphicStyle().width(300).height(140));
}
// 生成option中的series
private Series series(String name, String type, List data, String symbol, String lineStyle, Integer yAxisIndex) {
Series series;
if (type.contains("bar") || type.contains("line")) {
if (type.contains("line")) {
series = new Line();
} else {
series = new Bar();
}
series.setData(data);// 数据
series.name(name);// 名称
series.symbol(StringUtils.isBlank(symbol) ? "none" : symbol);
series.setType(SeriesType.valueOf(type));// 类型
series.setYAxisIndex(yAxisIndex);// 左轴还是右轴
if (Objects.nonNull(lineStyle)) {
series.setItemStyle(new ItemStyle().normal(new Normal().lineStyle(new LineStyle().type(LineType.valueOf(lineStyle)))));
}
// 生成最大值最小值
// series.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));
} else if (type.contains("pie")) {
Pie pie = new Pie();
pie.setType(SeriesType.valueOf("pie"));// 类型
pie.setData(data);
pie.setRadius("50%");// 圆度，可以是list如[40%, 70%]
if ("pie-doughnut".equals(type)) {
pie.setRadius(new String[]{"40%", "70%"});
// pie.setLabel(new ItemStyle().normal(new Normal().show(true).position(Position.valueOf("center"))));
}
series = pie;
} else {
series = new Line();
}
return series;
}
private void yAxis(Option option, boolean[] show, boolean splitLine) {
Axis<ValueAxis> axis1 = new ValueAxis();
axis1.setType(AxisType.value);
axis1.setPosition("left");
axis1.setAxisLine(new AxisLine().show(show[0]));
axis1.setScale(true);
axis1.setSplitLine(new SplitLine().show(splitLine));
Axis<ValueAxis> axis2 = new ValueAxis();
axis2.setType(AxisType.value);
axis2.setPosition("right");
axis2.setAxisLine(new AxisLine().show(show[1]));
axis2.setScale(true);
axis2.setSplitLine(new SplitLine().show(splitLine));
option.yAxis(axis1, axis2);
}
// 生成option中的legend
private void legend(Option option, List data, boolean pie) {
Legend legend = new Legend();
if (!pie) {
legend.setData(data);
legend.setOrient(Orient.valueOf("horizontal"));
legend.setTop("top");
legend.setLeft(0);
} else {
legend.setOrient(Orient.valueOf("vertical"));
legend.setLeft("left");
}
option.setLegend(legend);
}
// 生成option中的yAxis
private void yAxis(Option option, boolean[] show, boolean splitLine) {
Axis<ValueAxis> axis1 = new ValueAxis();
axis1.setType(AxisType.value);
axis1.setPosition("left");
axis1.setAxisLine(new AxisLine().show(show[0]));
axis1.setScale(true);
axis1.setSplitLine(new SplitLine().show(splitLine));
Axis<ValueAxis> axis2 = new ValueAxis();
axis2.setType(AxisType.value);
axis2.setPosition("right");
axis2.setAxisLine(new AxisLine().show(show[1]));
axis2.setScale(true);
axis2.setSplitLine(new SplitLine().show(splitLine));
option.yAxis(axis1, axis2);
}
// 生成option中的legend
private void legend(Option option, List data, boolean pie) {
Legend legend = new Legend();
if (!pie) {
legend.setData(data);
legend.setOrient(Orient.valueOf("horizontal"));
legend.setTop("top");
legend.setLeft(0);
} else {
legend.setOrient(Orient.valueOf("vertical"));
legend.setLeft("left");
}
option.setLegend(legend);
}
// 生成option中的grid
private void grid(Option option) {
Grid grid = new Grid();
grid.setLeft("5%");
grid.setRight("6%");
grid.setTop("10%");
grid.setBottom("10%");
grid.setContainLabel(true);
option.setGrid(grid);
}
上面的例子就可以完成一个option并生成图片了
我们在生成的json文件下可以看出，可以使用json字符串的形式来生成echarts图片，这里我就不多说了
如有侵权，请联系本人删除
扫一扫
6874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
