JavaScript ECharts可视化图表库

 更新时间:2023年01月18日 10:04:02   作者:钦拆大仁  
这篇文章主要介绍了JavaScript ECharts可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS异步处理的进化史深入讲解

    JS异步处理的进化史深入讲解

    这篇文章主要给大家介绍了关于JS异步处理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • TypeScript使用vscode监视代码编译的过程

    TypeScript使用vscode监视代码编译的过程

    这篇文章主要介绍了TypeScript使用vscode监视代码编译,使用tsc 文件名称可以将ts文件转化为js文件,js文件可以引入在html文件中直接使用,需要的朋友可以参考下
    2021-12-12
  • jsonp实现百度下拉框功能的方法分析

    jsonp实现百度下拉框功能的方法分析

    这篇文章主要介绍了jsonp实现百度下拉框功能的方法,结合实例形式分析了调用百度接口jsonp实现跨域请求及内容渲染相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 百度地图自定义控件分享

    百度地图自定义控件分享

    本文给大家介绍的是如何使用百度地图的自定义控件,附上示例,分享给大家,小伙伴们根据自己的需求稍微改动下即可使用。
    2015-03-03
  • js实现YouKu的漂亮搜索框效果

    js实现YouKu的漂亮搜索框效果

    这篇文章主要介绍了js实现YouKu的漂亮搜索框效果的方法,通过javascript结合鼠标事件与页面样式实现漂亮的搜索框效果,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • 用js+xml自动生成表格的东西

    用js+xml自动生成表格的东西

    用js+xml自动生成表格的东西...
    2006-12-12
  • javascript仿京东导航左侧分类导航下拉菜单效果

    javascript仿京东导航左侧分类导航下拉菜单效果

    这篇文章主要为大家详细介绍了javascript仿京东导航左侧分类导航下拉菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • javascript中mouseover、mouseout使用详解

    javascript中mouseover、mouseout使用详解

    这篇文章主要介绍了javascript中mouseover、mouseout使用详解的相关资料,需要的朋友可以参考下
    2015-07-07
  • js实现鼠标单击Tab表单切换效果

    js实现鼠标单击Tab表单切换效果

    这篇文章主要为大家详细介绍了js实现鼠标单击Tab表单切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • js中的getElementById的使用方法

    js中的getElementById的使用方法

    getElementById是JavaScript中的一个DOM方法,用于根据元素的id属性获取HTML文档中的元素,本文给大家介绍js中的getElementById的使用方法,感兴趣的朋友一起看看吧
    2023-10-10

最新评论