ECharts是一款基于javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apac
ECharts是一款基于javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。
ECharts官方地址
Examples - Apache ECharts
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。正在广泛的应用在互联网项目中。
柱状图、饼图实体类
@Data
public class Line<T extends Serializable> implements Serializable {
private static final long serialVersionUID = 855735354643061064L;
@apiModelProperty("x名称")
private String xName;
@ApiModelProperty("x轴坐标")
private List<String> keys;
@ApiModelProperty("数据")
private List<LineData<T>> valList;
@ApiModelProperty("图例数据")
private List<String> legendData;
}
@Data
public class LineData<T extends Serializable> implements Serializable {
private static final long serialVersionUID = -184896191268244331L;
@ApiModelProperty("数据值")
private T[] vals;
@ApiModelProperty("数据单位")
private String dataUnit;
@ApiModelProperty("曲线的名称")
private String name;
@ApiModelProperty("y轴位置")
private int yIndex = 1;
}
@Data
public class Pie {
@ApiModelProperty("饼图标题")
private String text;
@ApiModelProperty("图例标签")
private List<String> legendData = new ArrayList();
@ApiModelProperty("图例数据")
private List<PieData> seriesData = new ArrayList();
}
柱状图、饼图实体类
public class GraphicUtils {
private GraphicUtils(){}
public static Line<BigDecimal> getLine(BigDecimal[] dataArray, List<String> keys, String name, String unit) {
Line<BigDecimal> line = new Line<>();
LineData<BigDecimal> lineData = new LineData<>();
List<LineData<BigDecimal>> valList = new ArrayList<>();
valList.add(lineData.setVals(dataArray).setName(name).setDataUnit(unit));
return line.seTKEys(keys).setValList(valList);
}
public static Line<BigDecimal> getLine(List<String> keys, BigDecimal[] dataArray, BigDecimal[] dataArray2, String name, String name2,String unit) {
Line<BigDecimal> line = getLine(dataArray, keys, name, unit);
insertLineData(line,dataArray2,name2,unit);
return line;
}
public static Line<BigDecimal> getEmptyLine(List<String> keys, String xName) {
Line<BigDecimal> line = new Line<>();
List<LineData<BigDecimal>> valList = new ArrayList<>();
return line.setKeys(keys).setValList(valList).setXName(xName);
}
public static void insertLineData(Line<BigDecimal> histogramList, BigDecimal[] dataArray, String name,String dataUnit) {
List<LineData<BigDecimal>> valList = histogramList.getValList();
LineData<BigDecimal> lineData = new LineData<>();
valList.add(lineData.setVals(dataArray).setName(name).setDataUnit(dataUnit));
}
public static Pie getPie(String name, List<BigDecimal> resList, List<String> keyList) {
Pie pie = new Pie();
pie.setText(name);
List<PieData> seriesData = new ArrayList<>();
pie.setSeriesData(seriesData);
int length = resList.size() >= keyList.size() ? resList.size() : keyList.size();
for (int i = 0; i < length; i++) {
PieData direct = new PieData();
direct.setName(keyList.get(i));
direct.setValue(resList.get(i));
seriesData.add(direct);
}
return pie;
}
}
到此这篇关于JavaScript ECharts可视化图表库的文章就介绍到这了,更多相关js ECharts内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JavaScript ECharts可视化图表库
本文链接: https://www.lsjlt.com/news/178069.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0