JavaScript?ECharts可視化圖表庫
ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫,提供直觀,生動,可交互,可個性化定制的數(shù)據(jù)可視化圖表。ECharts最初由百度團(tuán)隊(duì)開源,并于2018年初捐贈給Apache基金會,成為ASF孵化級項(xiàng)目。
ECharts官方地址
ECharts,一個使用 JavaScript 實(shí)現(xiàn)的開源可視化庫,可以流暢的運(yùn)行在 PC 和移動設(shè)備上,兼容當(dāng)前絕大部分瀏覽器(IE8/9/10/11,Chrome,F(xiàn)irefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定制的數(shù)據(jù)可視化圖表。正在廣泛的應(yīng)用在互聯(lián)網(wǎng)項(xiàng)目中。
柱狀圖、餅圖實(shí)體類
@Data public class Line<T extends Serializable> implements Serializable { private static final long serialVersionUID = 855735354643061064L; @ApiModelProperty("x名稱") private String xName; @ApiModelProperty("x軸坐標(biāo)") private List<String> keys; @ApiModelProperty("數(shù)據(jù)") private List<LineData<T>> valList; @ApiModelProperty("圖例數(shù)據(jù)") private List<String> legendData; } @Data public class LineData<T extends Serializable> implements Serializable { private static final long serialVersionUID = -184896191268244331L; @ApiModelProperty("數(shù)據(jù)值") private T[] vals; @ApiModelProperty("數(shù)據(jù)單位") private String dataUnit; @ApiModelProperty("曲線的名稱") private String name; @ApiModelProperty("y軸位置") private int yIndex = 1; } @Data public class Pie { @ApiModelProperty("餅圖標(biāo)題") private String text; @ApiModelProperty("圖例標(biāo)簽") private List<String> legendData = new ArrayList(); @ApiModelProperty("圖例數(shù)據(jù)") private List<PieData> seriesData = new ArrayList(); }
柱狀圖、餅圖實(shí)體類
public class GraphicUtils { private GraphicUtils(){} /** * 返回單個圖表結(jié)構(gòu)的數(shù)據(jù) */ 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); } /** * 返回兩個圖表結(jié)構(gòu)的數(shù)據(jù) */ 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; } /** * 返回空圖表結(jié)構(gòu)的數(shù)據(jù) */ 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); } /** * 圖表里面添加數(shù)據(jù) */ 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; } }
到此這篇關(guān)于JavaScript ECharts可視化圖表庫的文章就介紹到這了,更多相關(guān)JS ECharts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript函數(shù)封裝隨機(jī)顏色驗(yàn)證碼(完整代碼)
這篇文章主要介紹了JavaScript函數(shù)封裝隨機(jī)顏色驗(yàn)證碼(完整代碼),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12Some tips of wmi scripting in jscript (1)
Some tips of wmi scripting in jscript (1)...2007-04-04JavaScript canvas實(shí)現(xiàn)動態(tài)點(diǎn)線效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)動態(tài)點(diǎn)線效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08讓背景如此暗淡(一種彈出提示信息時頁面背景色調(diào)改變的方法)
讓背景如此暗淡(一種彈出提示信息時頁面背景色調(diào)改變的方法)...2006-10-10使用js實(shí)現(xiàn)一個可編輯的select下拉列表
這篇文章主要介紹了使用js實(shí)現(xiàn)一個可編輯的select下拉列表,個人感覺還不錯,需要的朋友可以參考下2014-02-02JS實(shí)現(xiàn)隨機(jī)數(shù)生成算法示例代碼
JS實(shí)現(xiàn)隨機(jī)數(shù)生成算法的方法有很多,本文為大家介紹一個比較不錯的方法,代碼如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08JavaScript高級程序設(shè)計 閱讀筆記(十二) js內(nèi)置對象Math
js內(nèi)置對象Math使用介紹, 需要的朋友可以參考下2012-08-08