ECharts做为数据展现的一种更灵活直观的方式，Echarts 每种图表制作的适用场景以及优劣势

 

https://echarts.apache.org/zh/index.html            Apache ECharts首页

https://echarts.apache.org/examples/zh/index.html         Examples - Apache ECharts所有实例

vintage

dark

macarons

infographic

shine

 

 https://www.makeapie.com/

https://www.runoob.com/w3cnote/html5-canvas-eccharts.html

ECharts 教程：    https://www.runoob.com/echarts/echarts-tutorial.html

ECharts 下载：    https://github.com/apache/incubator-echarts

ECharts 官网：    https://www.echartsjs.com/zh/index.html

HTML5 Canvas 教程：    https://www.runoob.com/html/html5-canvas.html

ZRender：    https://www.runoob.com/w3cnote/html5-canvas-zrender.html

 

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

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

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

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

官方网址：https://echarts.baidu.com/

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

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

 https://airubby.github.io/echarts-example/

 

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图形特性：

丰富的可视化类型

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

千万数据的前端展现

移动端优化

多渲染方案，跨平台使用

深度的交互式数据探索

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

动态数据

绚丽的特效

 

Echarts 每种图表制作的适用场景以及优劣势

 

目录

• 一、柱状（条形）图
• 二、折线（面积）图
• 三、饼（圆环）图
• 四、地图
• 五、雷达（面积）图
• 七、漏斗图
• 八、词云图
• 九、散点（气泡）图
• 十、双轴图

一、柱状（条形）图

• 效果图：
  
• 适用场景：
  • 主要是二维数据集（每个数据点包括两个值 x 和 y ），但是只有一个维度需要进行比较，用于显示一段时间内的数据变化或显示各项之间的比较情况。
  • 适用于枚举的数据，比如地域之间的关系，数据没有必然的连续性。
• 优势：
  • 柱状图利用柱子的高度，反映数据的差异，肉眼对高度的差异很敏感。
• 劣势：
  • 柱状图的局限在于只适用中小规模的数据集。
    
    

二、折线（面积）图

• 效果图：
  
• 适用场景：
  • 折线图适合二维的大数据集，还适合多个二维数据集的比较，一般用来表示趋势的变化，横轴一般为日期字段。
• 优势：
  • 容易反应出数据变化的趋势。
    
    

三、饼（圆环）图

• 效果图：
  
• 适用场景：
  • 显示各项的大小与各项总和的所占比例，适用简单的占比比例图，在不要求数据精细的情况下适用。
• 优势：
  • 明确显示数据的比例情况，尤其适合渠道来源等场景。
• 劣势：
  • 不会具体的数值，只是整体的占比情况。
    
    

四、地图

• 效果图：
  
• 地图类型：
  • 行政地图（面积图）、行政地图（气泡图）、GIS地图（点状图）、GIS地图（热力图）、GIS地图（散点图）、GIS地图 （地图+柱状/饼图/条形图）
• 适用场景：
  • 主要适用于有空间位置的数据集，一般分成行政地图（气泡图，面积图）和GIS地图，行政地图一般有省份、城市数据就够了；而细化到具体区域，只要有数据，可做区域，全国甚至全球的地图。
• 优劣势：
  • 特殊情况下使用，涉及到行政区域时。
    
    

五、雷达（面积）图

• 效果图：
  
• 适用场景：
  • 雷达图适用于多维数据（四维以上），一般是用来表示某个数据字段的综合情况，数据点一般6个左右，太多的话辨别起来有些困难。
• 优势：
  • 主要用来了解公司各项数据指标的变动情形及其好坏的趋向。
• 劣势：
  • 理解成本较高。
    
    

七、漏斗图

• 效果图：
  
• 适用场景：
  • 漏斗图适用于业务流程多的流程分析，显示各流程的转化率。
• 优势：
  • 在网站分析中，通常用于转化率比较，它不仅能展示用户从网站到购买的最终转化率，还可以展示每个步骤的转化率，能够直观地发现和说明问题所在。
• 劣势：
  • 单一漏斗图无法评估网站某个关键流程中各步骤转化率的好坏。
    
    

八、词云图

• 效果图：
  
• 适用场景：
  • 显示词频，可以用来做一些用户画像，用户标签的工作。
• 优势：
  • 很酷很炫，很直观的图表。
• 劣势：
  • 使用场景单一，一般用来做词频。
    
    

九、散点（气泡）图

• 效果图：
  
• 适用场景：
  • 显示若干数据系列中各数值之间的关系，类似 XY 轴，判断两变量之间是否存在某种关联；
  • 散点图适用于三维数据集，但是其中只有两维数据是需要比较的，另外，散点图还可以看出极值的分布情况。
• 优势：
  • 对于处理值的分布和数据点的分簇区域（通过设置横纵项的辅助线）。
  • 散点图都很理想，如果数据集中包含非常多的点，那么散点图便是最佳图表类型。
• 劣势：
  • 在点状图中显示多个序列，看上去非常混乱。
    
    

十、双轴图

• 效果图：
  
• 适用场景：
  • 柱状图 + 折线图的搭配，使用情况有很多，比如数量级相差很大的情况，数据同环比分析对比等情况。
• 优势：
  • 通用，属于图表混搭使用，比如上图的 柱状图 + 折线图 混搭，图表展现很直观。

 

 

Smartbi ECharts图形类型-柱图

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

Smartbi ECharts图形类型-线图

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

Smartbi ECharts图形类型-饼图

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

Smartbi ECharts图形类型-油量图

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

油量图特点说明如下:

优势：

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

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

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

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

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

不适用场景：

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

不适合表示趋势。

Smartbi ECharts图形类型-地图

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

Smartbi ECharts图形类型-散点图

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

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

散点图的特点说明如下：

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

劣势：适用范围较窄。

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

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

Smartbi ECharts图形类型-联合图

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

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

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

双Y轴联合图：有两个Ｙ轴的联合图。

Smartbi ECharts图形类型-雷达图

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

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

雷达图的特点说明如下：

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

劣势：

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

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

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

适用场景：

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

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

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

Smartbi ECharts图形类型-关系图

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

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

Smartbi ECharts图形类型-热力图

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

热力图的特点说明如下：

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

https://edu.cnblogs.com/

高等软工课程总结
引言
开学伊始，“软件工程”这个概念对我来说很陌生。充满未知，对它有着莫名的惶恐。从一次一次的失败中我的确学到了很多,其他只是拷贝别人代码所学习不到的知识,要避免再次的失败,唯有付出更多的时间在继续学习软件工程的知识,当然也不只是需求分析和编码方面的知识,要保证一个软件项目的正常执行,一定要学习项目管理知识,知道如何推行你的项目在给定的时间内以优秀的质量满足客户的实际需求。总体来讲，这学期的软工课程在软件工程开发上给予我极其宝贵的经验，让我收获颇丰。当然也给过自己很多宝贵的经验和教训，自己反思了很多也收获了很多。

软件工程是个很有深度的领域,在这次实践中所感悟最深的是, “纸上得来终觉浅，绝知此事要躬行!”在这短短的时间里，让我深深的感觉到自己在实际应用中所学来专业知识的匮乏。让我真真领悟到“学无止境”这句话的涵义。对于知识有没有彻底的理解,不能光靠一张嘴说,也不不能凭感觉.自己感觉掌握了就行,不去实践.软件工程是门实践的科学.一定要而且只有在实践上实现了才能说你掌握了这个知识点.而不是光会说,这个这个应该是这样的,没有自己去实践,程序运行的结果只是简单的copy书上的或是google来的答案.这样是要不得的! 我深深的体会到了自己在专业知识方面的欠缺和不足，也意识到了自己作为计算机软件专业的学生，要想在以后的职业中崭露头角，除了要有过硬的理论知识，健康的体魄之外，还必须具备良好的心理素质，是自己在以后的途中无论经历什么样的困难，都立于不败之地。

我个人觉得知识是一定实践的,不实践怎么能知道实际的运行结果是否和我们的预期一样呢?在实践中学到的知识是受益终身的。

课程感悟
所在小组共4人，组内划分功能模块并分配工作，分工明确。在这个工程中，沟及时通，合理分配以及按时完成对软件正常的整体开发进度都是极为重要的。在这些过程中，我不仅知道了职业生涯所需具备的专业知识，而且让我深深体会到一个团队中的各个成员合作的重要性，要善于团队合作，善于利用别人的智慧，这才是大智慧。靠单一的力量是很难完成一个大项目的，在进行团队合作的时候，还要耐心听取每一个成员的意见，是我们的组合达到更加完美。在几个能力比较强的同学，特别是组长的带领下，我真的学到了很多东西，在此感谢他们的带领，感谢他们不嫌弃我的年纪轻以及经验不足带来工作上的不协调。
让我明白工作中需要能力，素质，知识之外，更重要的是学会了如何去完成一个任务，懂得了享受工作。当遇到问题，冷静，想办法一点一点的排除障碍，到最后获取成功，一种自信心就由然而生，这应该就是工作的乐趣。

项目感悟
我所在团队所做的任务是社区疫情防控系统。从刚开始我们对社区疫情防控的了解仅仅只停留在健康宝这一个单一形式的防控手段，但随着课程的深入，从需求分析了解到我们整个社区疫情防控系统的最终目的是做出一个具体到社区的疫情管理系统，到评审分析阶段，对整个系统该分成几个模块该分成几个流程有了清醒的认知，再到设计阶段，从类与数据流的视角看待整个系统，从而完整的确定了我们整个系统的流程，确定了我们整个系统的最终设计及其最核心类图。虽然我的经验尚浅，对软件工程的了解还不够深入，但老师的讲解让我明白了软件工程这一学科并不是一个仅仅写代码的学科，它重点在于要求我们对整个系统有一个宏观的把控，对整个工程有一个严格化的管理，保证软件能够有条不紊的开发。

结语
虽然这门课结束了，但是学习的脚步不能结束。慢慢的码农路才刚刚开始，学习之路还很长，我觉着那句话说的很对：一直坚持，收获就不会太少。贵在坚持，别轻易言弃。

最后,感谢我和我一起奋斗的伙伴们。感谢给予我们谆谆教导的老师和助教,谢谢你们!你们辛苦了！