ECharts数据可视化——组件使用大全

川长思鸟来 2022-11-12 02:49 981阅读 0赞

### 文章目录 ###

*   *   *   *  （一）标题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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70]  
在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’（切换为平铺模式

![在这里插入图片描述][20210322152229199.png]

#### （四）图例legend ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 1]

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  
![在这里插入图片描述][20210322152318405.png]  
timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。在使用方法上，timeline和之前介绍的组件略有差异，使用时会存在多个option，可以将ECharts传统的option称为原子option，将使用timeline时用到的option称为包含多个原子option的复合option

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 2]

#### （六）数据区域缩放dataZoom ####

官方文档：https://echarts.apache.org/zh/option.html\#dataZoom  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 3]  
在ECharts中，数据区域缩放组件称为dataZoom，它的作用是向用户提供区域缩放的功能，使用户可以通过区域缩放概览数据的整体情况，也能关注数据的细节。  
目前ECharts支持的区域缩放组件有如下几种：  
滑动条型数据区域缩放组件（dataZoomSlider）  
内置型数据区域缩放组件（dataZoomInside）  
框选型数据区域缩放组件（dataZoomSelect）

（2）滑动条型数据区域缩放组件

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

（3）内置型数据区域缩放组件  
所谓内置，是指该区域缩放组件是内置在坐标系中的，其参数和上面提到的滑动条型数据区域缩放组件的参数基本一致。当前缩放是通过鼠标滚轮滑动进行放大或者缩小的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 4]  
（4）框选型数据区域缩放组件  
框选型，是通过选框来进行数据区域缩放，该组件在之前提到的toolbox中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 5]

#### （七）网格grid ####

（1）介绍  
参考文档：https://echarts.apache.org/zh/option.html\#grid

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

#### （八）坐标轴 ####

（1）介绍  
一般来说，我们最常用的坐标轴是直角坐标系，尤其是二维的直 角坐标系，所以横轴（xAxis）和纵轴（yAxis）最常被使用。  
![在这里插入图片描述][20210322152429114.png]  
![在这里插入图片描述][20210322152434313.png]

#### （九）数据系列series ####

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

每个系列通过 type 决定自己的图表类型  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 7]

#### （十）全局字体样式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。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/67b2334337044a9c92458c5386433b8a.png
[20210322152229199.png]: /images/20221022/0f9ca336a54248b2b7d8ca809e8771a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/12ba3331bf4c45eeb2d3c71b004265e9.png
[20210322152318405.png]: /images/20221022/2868cea7a674475ab773812e66bd8abb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/673a88df465341798d669dc17cf7a0d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/ee55e8917fc34fea96ac3bb4cbf94b0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/005eb9ab16d747dcbaf3ab32c3300b36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/d1f036a445a94ab6b4a665a3c3074f1e.png
[20210322152429114.png]: /images/20221022/5872af41184942bbaf5f20ead192d784.png
[20210322152434313.png]: /images/20221022/b0062ed0e911453893deea7034156967.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/93e65b7337af4becb57fa7381cf5ba78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 7]: /images/20221022/4aa2b350169d4602ba8cb16db0260e68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 8]: /images/20221022/2feb074fbb0d403899e830ac0e85b620.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09jdG9wdXMyMQ_size_16_color_FFFFFF_t_70 9]: /images/20221022/eca58e6014aa4fed9830e885c3011b78.png