码迷,mamicode.com
首页 > 其他好文 > 详细

ECharts做为数据展现的一种更灵活直观的方式,基于用户对数据更易于理解

时间:2021-01-27 13:08:09      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:eva   综合   深度   article   优势   可读性   line   图片   平台   

 

 

ECharts 提供了常规的折线图柱状图散点图饼图K线图

用于统计的盒形图,用于地理数据可视化的地图热力图线图

用于关系数据可视化的关系图treemap旭日图

,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。

官方网址:

源码:  https://github.com/xwjie/SpringBootEChart

展示:   https://github.com/xwjie/SpringBootEChart

 

 

echarts 一页多图表自适应

有图片的myChart变成全局的,然后调用 

window.addEventListener("resize", function () {
    myChart1.resize(); 
    myChart2.resize()
    myChart3.resize()
    myChart4.resize()
    myChart5.resize()
    myChart6.resize()
    myChart7.resize(); 
 });

 

方案:

eval-echarts

基于echarts前后端封装 
springboot2.x+jquery1.11.x+echarts3.x
附demo 可以直接在项目中使用

介绍

  • 对echarts前端js对象option进行封装,前端只需要传接口url和div的id
  • 后台提供对应的java数据结构,每种图形对应自己的抽象模板类,整个数据对象拼接的过程都已经封装好
  • 极大的方便了开发人员,只需关注业务代码和sql语句的实现即可

特点

  • 1.使用多种设计模式保证代码的扩展性和解耦
  • 2.项目整体架构已经搭建完成
  • 3.自己可以动手扩展相关echarts图形实现代码
  • 4.目前支持7种图形 折线图,柱状图,条线图,饼状图,环形图,雷达图,区域图
  • 5.新增主题设置
  • 6.持续更新

项目目录

  • eval-core -----相关实现核心代码
  • eval-demo -----springboot简易demo 代码持续更新中

环境

jdk8 
springboot2.x 
jquery1.11x 
echarts3.x

ECharts是产品中的一种报表类型,它以图形的方式展现指标数据,并通过简单的设置实现报表互动。

ECharts做为数据展现的一种更灵活直观的方式,基于用户对数据更易于理解、对决策更具科学依据的需求,对不同业务背景下的数据进行处理,可以实现对数据多角度、多层次的分析。

Smartbi ECharts图形特性:

丰富的可视化类型

多种数据格式无需转换直接使用

千万数据的前端展现

移动端优化

多渲染方案,跨平台使用

深度的交互式数据探索

多维数据的支持以及丰富的视觉编码手段

动态数据

绚丽的特效

技术图片

技术图片

Smartbi ECharts图形类型-柱图

以实际的业务需求和美观性为出发点,柱图衍生出多种不同形态的子图:堆积柱图、瀑布图、普通横条图、堆积横条图、3D柱图,用来更好的表现和满足不同的数据对比分析需求。

技术图片

Smartbi ECharts图形类型-线图

以实际的业务需求和美观性为出发点,线图衍生出多种不同形态的子图:标准折线图、标准面积图、堆积面积图,用来更好的表现和满足不同的数据对比分析需求。

技术图片

Smartbi ECharts图形类型-饼图

以实际的业务需求和美观性为出发点,饼图衍生出多种不同形态的子图:标准饼图、标准环形图、南丁格尔玫瑰图,用来更好的表现和满足不同的数据对比分析需求。

技术图片

Smartbi ECharts图形类型-油量图

油量图是指以油量表的形式来展现指标数据。包含一个圆形的表盘和一个指针,表盘上有相应的刻度表示数值的范围,指针指向当前数值,可直观的表现出某个指标的进度或实际情况。

油量图特点说明如下:

优势:

1)直观的展示某个指标的进度或实际情况。

2)圆形结构更有效利用空间。

劣势:数据场景比较单一。

数据要求:一个或多个指标值。

适用场景:显示单一的数据。

不适用场景:

1)不适合比较不同的变量。

不适合表示趋势。

技术图片

Smartbi ECharts图形类型-地图

以实际的业务需求和美观性为出发点,地图衍生出多种不同形态的子图:标准地图、航线图、3D航线图,用来更好的表现和满足不同的数据对比分析需求。

技术图片

Smartbi ECharts图形类型-散点图

用两组数据构成多个坐标点,考察坐标点的分布,判断两变量之间是否存在某种关联或总结坐标点的分布模式。

散点图用来研究变量之间的关系。

散点图的特点说明如下:

优势:研究两变量之间的关系,或区间分布模式。

劣势:适用范围较窄。

数据要求:一个或两个维度,两个度量;分类字段,散点图通常用于比较跨类别的聚合数据。

适用场景:销售量和折扣之间的关系;收入和消费之间的关系;社会现象关系的研究等 。

技术图片

Smartbi ECharts图形类型-联合图

联合图是指以线图、柱图、面积图或者散点图任意两两组合(双线图、双柱图、双面积图、双散点图亦包含在内)的表现形式来展现两个或两个以上数据指标情况。

Smartbi ECharts图形类型支持如下两种类型的联合图:

单Y轴联合图:只有一个Y轴的联合图。

双Y轴联合图:有两个Y轴的联合图。

技术图片

Smartbi ECharts图形类型-雷达图

雷达图又称戴布拉图或蜘蛛网图,它从一个中心点向外辐射出多条坐标轴(4条以上),每一个分类数据都占有一条数值坐标轴,并连接各坐标轴上同一系列的值构成一个个不规则多边形。在任何一个轴上靠近图形中心的点表示一个较低的数值,靠近图形边缘的点表示一个较高的数值。

雷达图通常用于在同一组坐标轴上比较不同实体的性能,也可用于表示和同一个项目相关的多个不同的因素。

雷达图的特点说明如下:

优势:使用者能对各项指标的变动情形及好坏趋向一目了然。

劣势:

1) 雷达图上多边形过多会使可读性下降。如果有五个以上要评估的事物,相应的多边形轮廓和填充区域,都会产生覆盖和混乱,使得数据难以阅读。

2) 分类数据变量过多,也会造成可读性下降,因为一个变量对应一个坐标轴,这样会使坐标轴过于密集。因此,要限制雷达图的变量数量。

数据要求:维度的数据量不宜过多,度量不多于5个。

适用场景:

1) 雷达图适用于比较类的需求,主要被应用在与其他数据的比较,公司的优势和广告调查等方面。

2) 雷达图用于显示各衡量指标的综合水平以及指标间的平衡性,常用于企业经营状况和财务分析。

不适用场景:数据类别过多。

技术图片

Smartbi ECharts图形类型-关系图

关系图使用圆圈和连线表示节点与节点之间的关系。

下图是一个关系图示例,展示人物之间的关系。每个节点的颜色表示他们的类型,圆圈大小表示每个人的声望大小,圆圈越大,声望越大。

技术图片

Smartbi ECharts图形类型-热力图

热力图是指用x轴和y轴表示的两个分类字段确定数值点的位置,通过相应位置的矩形颜色去表现数值的大小,颜色深代表的数值大。

热力图的特点说明如下:

优势:好看、易于理解,数据信息更直观有效。

 

ECharts做为数据展现的一种更灵活直观的方式,基于用户对数据更易于理解

标签:eva   综合   深度   article   优势   可读性   line   图片   平台   

原文地址:https://www.cnblogs.com/xinxihua/p/14327694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!