广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript ECharts可视化图表库
  • 288
分享到

JavaScript ECharts可视化图表库

JS EChartsJS ECharts可视化图表 2023-01-18 12:01:17 288人浏览 薄情痞子
摘要

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文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript ECharts可视化图表库
    ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apac...
    99+
    2023-01-18
    JS ECharts JS ECharts可视化图表
  • Vue怎么使用echarts可视化图表
    这篇文章主要介绍“Vue怎么使用echarts可视化图表”,在日常操作中,相信很多人在Vue怎么使用echarts可视化图表问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么使用echarts可视化图表...
    99+
    2023-07-04
  • JavaScript数据可视化:ECharts制作地图
    目录概述注意事项一. 使用方式二. 实现步骤初步实现代码效果:geo常见配置添加上面配置之后的效果图:显示某一个省份(河南省)效果不同区域显示不同颜色地图和散点图的结合总结概述 地图...
    99+
    2022-11-12
  • 如何使用Echarts制作可视化图表
    这期内容当中小编将会给大家带来有关如何使用Echarts制作可视化图表,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。最近在结合新学的爬虫在做一些可视化的东西了,今天讲讲可视化图表相关的。关于可视化工具:E...
    99+
    2023-06-19
  • JavaScript可视化与Echarts详细介绍
    目录一、可视化介绍二、可视化库介绍三、EchartsEcharts引入和使用了解基础配置一、可视化介绍 可视化:将数据用图表展示出来,让数据更加直观、让数据特点更加突出应用场景:营销...
    99+
    2022-11-13
  • 使用antv替代Echarts实现数据可视化图表详解
    目录前言面积图常用参数文档图表度量 scale提示 tooltip坐标系 axischart.line(options)chart.area(options)geom.positio...
    99+
    2022-11-13
  • echarts几个公司内部数据可视化图表必收藏
    目录折线图日负荷折线图最大需求表柱状图日电量柱状图分时电量功率因数三相温度水球图年月日负荷率图散点图三相平衡最近公司有一个需求,要做一个数据可视化的页面,所有的图表都在下面,做这些都...
    99+
    2022-11-13
    echarts可视化图表 echarts数据可视化
  • JavaScript实现echarts水球图百分比展示大屏可视化
    目录前言:示例:简介:代码实现项目文件中引入声明实例,设置参数,绘制水球图设置缩放总结:前言: 掘友们,大家晚上好啊。今天突然的看到之前的同学,在宿舍群里询问关于echarts水球图...
    99+
    2022-11-13
    JS echarts水球图大屏可视化 JS echarts 水球图百分比展示
  • 如何利用php接口和ECharts生成可视化的统计图表
    在今天数据可视化变得越来越重要的背景下,许多开发者都希望能够利用各种工具,快速生成各种图表与报表,以便能够更好的展示数据,帮助决策者快速做出判断。而在此背景下,利用 Php 接口和 ECharts 库可以帮助许多开发者快速生成可视化的统计图...
    99+
    2023-12-18
    可视化 echarts PHP接口
  • springboot+echarts +mysql制作数据可视化大屏(四图)
    作者水平低,如有错误,恳请指正!谢谢!!!!! 项目简单,适合大学生参考 分类专栏还有其它的可视化博客哦! 专栏地址:https://blog.csdn.net/qq_55906442/category_11906804.htmlspm=1...
    99+
    2023-10-21
    spring boot echarts mysql 大数据 java
  • SpringBoot+Echarts如何实现用户访问地图可视化
    这篇文章主要介绍SpringBoot+Echarts如何实现用户访问地图可视化,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!SpringBoot+Echarts用户访问地图可视化意义 在常见的电商、新闻、社...
    99+
    2023-06-16
  • JavaScript可视化库有哪些
    这篇文章主要介绍“JavaScript可视化库有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript可视化库有哪些”文章能帮助大家解决问题。Dat...
    99+
    2022-10-19
  • Vue中使用Echarts可视化图表宽度自适应的完美解决方案
    目录一、问题阐述:二、解决思路:三、最终效果:一、问题阐述: 开发H5项目中应用到Echarts数据可视化,由于H5主要使用在手机,屏幕宽度大大限制了图表的展现,问题如下。 上图中...
    99+
    2022-11-13
  • Echarts中怎么实现数据可视化
    这期内容当中小编将会给大家带来有关Echarts中怎么实现数据可视化,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Echarts这个方案从我接触到做出一个还算不错的图,也就不过几个小时的时间,其中至少60...
    99+
    2023-06-04
  • Django显示可视化图表的实践
    一 实战 1 Django_lab\urls.py # -*- coding: utf-8 -*- from django.conf.urls impor...
    99+
    2022-11-12
  • JavaScript数据可视化库有哪些
    本篇内容介绍了“JavaScript数据可视化库有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Jav...
    99+
    2022-10-19
  • Vue使用echarts可视化组件的方法
    echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm instal...
    99+
    2022-11-12
  • 怎么用Python echarts实现数据可视化
    本篇内容主要讲解“怎么用Python echarts实现数据可视化”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Python echarts实现数据可视化”吧!1.概述...
    99+
    2023-06-29
  • Vue中如何使用echarts可视化组件
    这篇文章将为大家详细讲解有关Vue中如何使用echarts可视化组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。找到脚手架项目所在地址,执行cnpm install echarts,安装e...
    99+
    2023-06-20
  • 基于Python的数据可视化库之Seaborn的图表类型
    作者:禅与计算机程序设计艺术 《基于Python的数据可视化库之 Seaborn 的图表类型》 作为一位人工智能专家,我经常需要使用数据可视化工具来处理和分析大量的数据。在Python中,Seabo...
    99+
    2023-10-04
    自然语言处理 人工智能 语言模型 编程实践 开发语言 架构设计
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作