Echarts | Koreyoshi

type

status

date

slug

summary

📝 获取方式

一、获取ECharts

1.从npm获取

2.从CDN获取

可以从以下免费 CDN 中获取和引用 ECharts。

jsDelivr

unpkg

cdnjs

3.从Github获取

apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

二、在项目中ECharts

1.NPM 安装 ECharts

2.全部引入ECharts

3.按需引入 ECharts 图表和组件

4.在 TypeScript 中按需引入

📝 概念理解

一、图表容器的初始化大小

在HTML中定义一个<div>节点，传入节点也即图表的初始大小

2.也可以选择不定义style，而在初始化中指定init的初始大小

3.监听与浏览器大小进行自适应

d.容器节点被销毁以及重建时

假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。

本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。

正确的做法是，在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，在图表容器重新被添加后再次调用 echarts.init 初始化。——防止内存泄漏。

二、ECharts中的样式设置

1.颜色主题

a.设置颜色主题

b.导入js文件

c.UMD格式的js文件，内部做自注册

2.调色盘

在option中进行设置（可定义type），图形、系列会在调色盘自动选择颜色

3.直接的样式设置

在option里进行设置，定义label、itemstyle等。

可以单独定义高亮的样式：emphasis。

三、数据

1.在系列中设置数据

适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。

2.在数据集中设置数据

指定数据到视觉的映射，从而形成图表。

数据和其他配置可以被分离开来，易于管理。

数据可以被多个系列和组件复用。

支持更多的数据常用格式，一定程度上避免了数据格式的转化。

3.数据到图形的映射

参数seriesLayoutBy可设置为row或column，指定数据的行列设置。

设置dimension可以单独定义，也可以默认。

通过series.encode对维度进行映射。

注意：定义数据集之后仍可以在内部进行数据自定义。

四、数据转换transform

在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。

1.数据转换器filter

基于维度进行关系或者逻辑运算。其中维度可以声明为名称或者索引index。

有的时候我们也要对数据通过解析器parser进行处理才能够进行比较。

2.数据转换器sort

"sort" 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ axis.type: 'category' ）中显示排过序的数据。

对于排序的内容需要选择进行比较的维度以及排序方式（desc）可以进行多重排序、多个维度的排序，非数值的字符串按照字符串排序。同样的这里也可以进行parser解析器对非数值数据进行转换。

3.使用外部的数据转换器

使用外部的数据转换器之前需要注册数据转换器。

一下是一些官方给出的示例。

聚集 (Aggregate)

直方图 (Histogram)

简单聚类 (Clustering)

线性回归线 (Linear Regression)

指数回归线 (Exponential Regression)

对数回归线 (Logarithmic Regression)

多项式回归线 (Polynomial Regression)

五、坐标轴

1.坐标轴组成

2.配置定义

X轴：xAxis

y轴：yAxis

轴线：linestyle

刻度：axisTick

刻度标签：axisLabel

六、视觉映射

1.定义

数据可视化时数据到视觉元素的映射过程。

2.visualMap组件

该组件定义了把数据的哪个维度映射到说明视觉元素上。

连续型视觉映射continuous：通过制定最大值和最小值，就可以确定视觉映射的范围。

分段性视觉映射piecewise

连续型数据平均分段
连续型数据自定义分段
离散数据（类别性数据）

七、图例

1.定义

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。

2.设定legend

布局

样式

交互

八、事件与行为

1.定义

在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。

2.鼠标事件的处理

3.组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出。

💡 应用示例

1.柱状图

基础柱状图

堆叠柱状图：使用 EChart 实现堆叠柱状图的方法非常简单，只需要给一个系列的 stack 值设置一个字符串类型的值，这一个值表示该系列堆叠的类别。也就是说，拥有同样 stack 值的系列将堆叠在一组。

动态排序柱状图:动态排序柱状图是一种展示随时间变化的数据排名变化的图表，通常是横向的柱条。

柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果

yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列

yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长

yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长

如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条

xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好

如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true

animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）

animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同

以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序

阶梯瀑布图：Apache ECharts 中并没有单独的瀑布图类型，但是我们可以使用堆叠的柱状图模拟该效果。

2.折线图

基础折线图

最简单的折线图

笛卡尔坐标系中的折线图

折线图的样式设置

折线的样式：lineStyle。
数据点的样式：itemStyle。

在数据点出显示数值：在系列中，这数据点的标签通过 series.label 属性指定。如果将 label 下的 show 指定为true，则表示该数值默认时就显示；如果为 false，而 series.emphasis.label.show 为 true，则表示只有在鼠标移动到该数据时，才显示数值。
空数据：在一个系列中，可能一个横坐标对应的取值是“空”的，将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。在 ECharts 中，我们使用字符串 '-' 表示空数据，这对其他系列的数据也是适用的。注意：空数据！=取值为0的数据。

堆叠折线图：同堆叠柱状图一样，设置stack即可。

区域面积图：区域面积图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。通过 areaStyle 设置折线图的填充区域样式。

平滑曲线图:将折线图系列的 smooth 属性设置为 true 即可。

阶梯线图:阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。

3.饼图

基础饼图

圆环图:饼图是一个内半径为 0 的圆环图，也就是说，饼图是圆环图的特例。

南丁格尔图（玫瑰图）:ECharts 可以通过将饼图的 series.roseType 值设为 'area' 实现南丁格尔图，其他配置项和饼图是相同的。

4.散点图

基础散点图

最简单的散点图

笛卡尔坐标系下的散点图

散点图的样式设置

symbol:'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow' 。也可以使用SVG路径的矢量图。
series.symbolSize：它既可以是一个表示图形大小的像素值，也可以是一个包含两个 number 元素的数组，分别表示图形的宽和高。同时它还可以作为一个回调函数使用。

💡

有关Echarts或者使用上的问题，欢迎您在底部评论区留言，一起交流~