找回密码
 立即注册

QQ登录

只需一步,快速开始

本帖最后由 Felix.Li 于 2023-7-21 09:13 编辑

新增十大Echart图表,JS扩展能力,让你的大屏更酷炫,更流畅(1)

新增十大Echart图表,JS扩展能力,让你的大屏更酷炫,更流畅(2)


    一、 应用场景

Echarts是一款基于JavaScript的开源图表库,具有丰富的图表类型和灵活的配置选项,适用于各种应用场景。通过上一章节,我们了解到本次更新内置了非常丰富的Echarts原生插件,在本章节就重点介绍本次7.0中的Echarts可以进行丰富的扩展能力,通过直接调整options选项,就能够让你的图表显示为你想调整的任意效果。

先看看,我们基于本次更新做的一些效果展示:

image.png93144530.png


二、 新特性介绍为什么要选择Echarts扩展?

Echarts是一款基于JavaScript的开源数据可视化库,具有以下几个优势:

1.     简洁易用:Echarts提供了丰富的图表类型和配置选项,使用户可以轻松地创建各种类型的交互式图表。它提供了直观的API和示例文档,使开发者能够快速上手并灵活地定制图表。

2.     强大的可扩展性:Echarts具有高度的可扩展性,可以通过插件的方式添加新的图表类型和特性。它还支持自定义图表主题和图表样式,开发者可以根据自己的需求进行定制。

3.     良好的跨平台兼容性:Echarts可以在各种浏览器和设备上运行,并且自适应不同屏幕大小。它还支持多种数据格式的导入和输出,包括JSON、CSV和Excel等,可与各种后端技术和前端框架集成。

       image.png803679809.png

本次更新,就是基于Echarts强大的扩展能力,了解过wyn的朋友都知道,所有图表中有强大的属性支持,但是对于个性化极强的业务场景,就需要一定的代码调整能力,所以本次,就以如何调整效果更好的Echarts图表为大家详细介绍。

接下来从浅入深的为大家介绍一下,新增图表扩展能力的的应用方式
(一) 雷达图

雷达图,又称为蛛网图或星型图,是一种常见的多维数据可视化图表类型。它通过多个均匀分布的轴线和连接各个轴线的线段来展示多个变量之间的关系。接下来就完成一个半透明的雷达图,带着大家走入扩展图表的世界。

使用教程

1. 进入设计器界面,选择 雷达图(Echarts)

image.png70938414.png

2. 绑定数据

image.png979032592.png

3.属性设置

image.png551859435.png

4.初始显示效果

image.png160095213.png

5.自定义属性调整

image.png70394591.png

6.最终显示效果

image.png476600341.png

(二) 折线图

折线图是一种常见的数据可视化图表类型,通过连接数据点形成线段来展示数据的趋势和变化。折线图可以应用于许多不同的场景,以下是一些常见的折线图应用场景①时间序列数据分析,②统计数据对比,③实时数据监控,④数据趋势分析。但在实际使用过程中,这些图的应用场景非常丰富。以下就为大家介绍如何实现一个比较漂亮的仪表板设计

使用教程:


1.   进入设计器界面,选择 折线图(echarts)

image.png822169799.png

2.绑定数据

image.png393214110.png

3.属性设置

image.png597721862.png

4.初始显示效果

image.png415752562.png

5.自定义属性调整

image.png327502135.png

6.最终显示效果

image.png327471923.png


(三) 散点图

散点图是一种常见的数据可视化图表类型,通过在坐标系中绘制数据点来展示两个变量之间的关系。根据具体的需求和数据特点,可以选择适当的数据点表示方式、颜色编码和标记方式,以提供更丰富的信息和更明确的解读


使用教程:

1. 进入设计器界面,选择 气泡图(echarts)

image.png270914305.png

2.绑定数据

image.png169007872.png

3.属性设置

image.png944318542.png

4.初始显示效果

image.png971811828.png

5.自定义属性调整

image.png371763305.png

6.最终显示效果

image.png882987365.png


通过上面的几个简单的案例,相信大家已经对于扩展能力有了一定的了解,当然还有更加深入的设置方式,大家可以通过案例中的演示,进行更丰富的设置。

三、 产品和示例下载

该文章配套示例如下:

echarts自定义属性案例.zip (12.09 MB, 下载次数: 60)

image.png707574157.png

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部