JavaScript?ECharts可視化圖表庫
ECharts是一款基于JavaScript的數據可視化圖表庫,提供直觀,生動,可交互,可個性化定制的數據可視化圖表。ECharts最初由百度團隊開源,并于2018年初捐贈給Apache基金會,成為ASF孵化級項目。
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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
bootstrap table實現點擊翻頁功能 可記錄上下頁選中的行
這篇文章主要介紹了bootstrap table實現點擊翻頁功能,可記錄上下頁選中的行,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09
js性能優(yōu)化 如何更快速加載你的JavaScript頁面
JavaScript現在極其重要。一些網站使用JavaScript來增添魅力;如今的許多Web應用程序依賴它;其中一些甚至是完全用JavaScript編寫而成的。我在本文中將指出一些重要的規(guī)則,介紹如何使用你的JavaScript、使用哪些工具以及你將從中得到什么好處2012-03-03

