首页 > 编程知识 正文

可视化数据表echarts,echarts常用组件

时间:2023-05-06 09:28:37 阅读:280991 作者:1328

文章目录 (一)标题title(二)提示框tooltip(三)工具栏toolbox功能案例 (四)图例legend(五)时间轴timeline(六)数据区域缩放dataZoom(七)网格grid(八)坐标轴(九)数据系列series(十)全局字体样式textStyle

(一)标题title

文档地址
https://echarts.apache.org/zh/option.html#title

常用属性
text:主标题文本,支持用n换行。
subtext:副标题文本,支持用n换行。
left:与容器左侧的距离,其取值可以是具体像素值,例如
10;也可以是相对于容器的百分比值,例如10%;还可以是更常
用的left、center、right,可以理解为左对齐、居中、右对
齐。
show:是否显示标题组件,取值为布尔型数据,默认为true。

(二)提示框tooltip

(1)介绍
官方文档:https://echarts.apache.org/zh/option.html#tooltip

在ECharts中,提示框组件称为tooltip,它的作用是在合适的时机向用户提供相关信息。下面列举一些常用的参数,具体说明如下。

trigger:触发类型,可选的参数有item(图形触发)、 axis(坐标轴触发)、none(不触发)。

formatter:提示框浮层内容格式器,一般使用字符串模板

axisPointer:坐标轴指示器配置项,type是该参数的子参数,
作用为设置指示器类型,取值可选line(直线指示器),

shadow(阴影指示器),cross(十字准星指示器),none(无指示器)。

(三)工具栏toolbox

官方文档:
https://echarts.apache.org/zh/option.html#toolbox
在ECharts中,工具栏组件称为toolbox。通过设置工具栏,我们 可以将可视化下载到本地,或者查看可视化的底层数据等。

show:是否显示工具栏组件,取值为布尔型数据,默认为
true。

feature:各工具配置项,其中包含很多常用的子参数,例如
saveAsImage、restore、dataView、magicType等。其中,
saveAsImage是将可视化结果保存在本地,restore是将可视化
还原到初始的设置,dataView可以看到可视化的底层数据视
图,magicType则可以将一种可视化转为另一种可视化。

功能案例

动态类型切换
toolbox.feature. magicType可实现动态类型切换

feature: { magicType: { type: ['line', 'bar', 'stack', 'tiled'] }}

启用的动态类型,包括’line’(切换为折线图), ‘bar’(切换为柱状图), ‘stack’(切换为堆叠模式), ‘tiled’(切换为平铺模式

(四)图例legend

在ECharts中,图例组件称为legend,其作用是区分不同的数据展示。图例,展现了不同系列的标记、颜色和名字。
官方文档:https://echarts.apache.org/zh/option.html#legend

show:是否显示图例组件,取值为布尔型数据,默认为true。
left:与容器左侧的距离,其取值可以是具体像素值,例如
10;也可以是相对于容器的百分比值,例如10%;还可以是更常
用的left、center、right,可以理解为左对齐、居中、右对
齐。
top:与容器顶部的距离,其取值可以是具体像素值,例如10;
也可以是相对于容器的百分比值,例如10%;还可以是更常用的
top、middle、bottom,可以理解为处于顶部、处于中部、处于
底部。
orient:图例列表的布局朝向,默认是horizontal(水平
的),也可以是vertical(竖直的)。
data:图例中的数据数组,通常与数据展示的系列series一一对应。

(五)时间轴timeline

官方文档:https://echarts.apache.org/zh/option.html#timeline

timeline 组件,提供了在多个 ECharts option 间进行切换、播放等操作的功能。在使用方法上,timeline和之前介绍的组件略有差异,使用时会存在多个option,可以将ECharts传统的option称为原子option,将使用timeline时用到的option称为包含多个原子option的复合option

(六)数据区域缩放dataZoom

官方文档:https://echarts.apache.org/zh/option.html#dataZoom

在ECharts中,数据区域缩放组件称为dataZoom,它的作用是向用户提供区域缩放的功能,使用户可以通过区域缩放概览数据的整体情况,也能关注数据的细节。
目前ECharts支持的区域缩放组件有如下几种:
滑动条型数据区域缩放组件(dataZoomSlider)
内置型数据区域缩放组件(dataZoomInside)
框选型数据区域缩放组件(dataZoomSelect)

(2)滑动条型数据区域缩放组件

xAxisIndex:指定控制的x轴
yAxisIndex:指定控制的y轴
filterMode:过滤模式,dataZoom数据窗口缩放的实质是数据过滤,即过滤掉窗口外的内容。

(3)内置型数据区域缩放组件
所谓内置,是指该区域缩放组件是内置在坐标系中的,其参数和上面提到的滑动条型数据区域缩放组件的参数基本一致。当前缩放是通过鼠标滚轮滑动进行放大或者缩小的。

(4)框选型数据区域缩放组件
框选型,是通过选框来进行数据区域缩放,该组件在之前提到的toolbox中

(七)网格grid

(1)介绍
参考文档:https://echarts.apache.org/zh/option.html#grid

可以通过grid在可视化坐标系中控制可视化展示时的网格大小, 常用的参数除了之前提到的位置参数,如left、top、right、bottom等,还有width(grid组件的宽度)、height(组件的高度),两者默认的参数都是auto,即自适应,当然也可以指定具体数值

(八)坐标轴

(1)介绍
一般来说,我们最常用的坐标轴是直角坐标系,尤其是二维的直 角坐标系,所以横轴(xAxis)和纵轴(yAxis)最常被使用。

(九)数据系列series

一个图表可能包含多个系列,每一个系列可能包含多个数据,所以数据系列(series)主要作为数据的容器。对于每种可视化图表,series的形式并不完全相同。下面来看一个饼图(pie)的series结构。series是一个数组结构,使用中括号,中括号内的每个部分用大 括号包含,每个大括号类似一个字典结构,包含键(key)和值(value)。例如代码中的name为键,“访问来源”为值;type指定了图为pie(饼图);radius指定了饼图的半径大小,以图在图框中的占比表示大小;data中包含了饼图中每块饼的数据内容

每个系列通过 type 决定自己的图表类型

(十)全局字体样式textStyle

在制作可视化时,常常会用到文字展示,此时选择一种合适字体的样式与可视化搭配显得尤为重要。在全局字体样式(textStyle)中,我们可以定义全局的字体样式显示,常用的参数及其说明如下所示。
color:文字的颜色,例如textStyle.color =“#fff”。
fontStyle:文字字体的风格,可选值有normal、italic、
oblique。
fontWeight:文字字体的粗细,可选值有normal、bold、
bolder、lighter、100、200等数值。
fontFamily:文字的字体系列,可选值有sans-serif、serif、
monospace、Arial、Courier New、Microsoft YaHei等。
fontSize:文字的字体大小,取值为数值,例如12。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。