echats数据可视化教程

除了用户的交互操作，有时也需要在程序里调用方法并触发图表的行为，如显示tooltip、选中图例等。在ECharts 3.x和ECharts 4.x中，通过dispatchAction({ type:

在ECharts中的交互事件及事件说明如表所示 、 利用随机生成的300个数据绘制折线图与柱状图，如图所示。 由图可知，有上、下两个图表，两个图表使用相同的随机生成的300个随机数据。通过调用折线图的

事件是用户或浏览器自身执行的某种动作，如click、mouseover、页面加载完毕后触发load事件，都属于事件。 为了记录用户的操作和行为路径，需要完成鼠标事件处理和组件交互的行为事件的处理。 响

主题是ECharts图表的风格抽象，用于统一多个图表的风格样式。 为了顺应不同的绘图风格需求，需要下载ECharts官方提供default、infographic、shine、roma、macaron

当需要展示的数据比较多时，放在一个图表进行展示的效果并不佳，此时，可以考虑使用两个图表进行联动展示。 ECharts提供了多图表联动（connect）的功能，连接的多个图表可以共享组件事件并实现保存图

前面初步讲解了Echarts图表混搭的一些内容,这里再举一个例子继续说明echarts的图表混搭。下面先看图 由图可知，由左边的两个柱状图和右边的两个饼图共同组成了一个混搭的图表。左边的两个柱状图分别

在ECharts的图表混搭中，一个图表包含唯一图例、工具箱、数据区域缩放 模块、值域漫游模块和一个直角坐标系，直角坐标系可包含一条或多条类目轴线、一条或多条值轴线，类目轴线和值轴线最多上下左右共4条。

矩形树图（Treemap）是用于展现有群组、层次关系的比例数据的一种分析工具。 它不仅可以通过矩形的面积、排列和颜色来显示复杂的数据关系，并具有群组、层级关系展现的功能，而且能够直观地体现同级之间的比

词云图（WordCloud）是对文本中出现频率较高的“关键词”予以视觉化的展现，词云图可以过滤掉大量的低频低质的文本信息，使得浏览者只要一眼扫过文本就可领略文本的主旨。 词云图是一种非常好的图形展现方

雷达图将多个维度的数据映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就成了雷达图。 在坐标轴设置恰当的情况下，雷达图所围面积能表现出一些信息量。雷达图把纵

漏斗图（Funnel）或金字塔是一个倒（正）三角形的条形图，适用于业务流程比较规范、周期较长、环节较多的流程分析。 漏斗图也是常用的BI类图表之一，通过漏斗图或金字塔对各环节业务数据进行比较，不仅能够

仪表盘（Gauge）也被称为拨号图表或速度表图，用于显示类似于速度计上的读数的数据，是一种拟物化的展示形式。 仪表盘是常用的商业智能（BI）类的图表之一，可以轻松展示用户的数据，并能清晰地看出某个指标

上一小节介绍过的散点图，只含有两个变量。如果还想要再增加变量，那么可以使用点的大小来表示。因为图中包含大小不一致的点，像气泡一样，所以称这种图为气泡图（bubble）。 因此，气泡图与散点图不同的是，

散点图（Scatter）是由一些散乱的点组成的图表。因为其中点位置是由其x值和y值确定的，所以也称为XY散点图。 散点图又称散点分布图，是以一个变量为横坐标，另一变量为纵坐标，利用散点（坐标点）的分布

在一些折线图或柱状图当中，可以经常看到图中对最高值和最低值进行了标记。 在ECharts中，标记点（markPoint）常用于表示最高值和最低值等数据，而有些图表中会有一个平行于x轴的、表示平均值等数

详情提示框（tooltip）组件又称气泡提示框组件或弹窗组件，也是一个功能比较强大的组件。 当鼠标滑过图表中的数据标签时，会自动弹出一个小窗体，展现更详细的数据。 有时为了更友好地显示数据内容，还需要

ECharts中的工具箱（toolbox）组件包含了可视化图表中一些附加的功能，它内置了多个子工具。 ECharts中的工具箱（toolbox）组件功能非常强大，其内置有6个子工具，包括标记（mark

九宫格布局是一种常用的布局方式，ECharts中的大部分组件都支持九宫格布局。 标题组件（title），顾名思义，就是图表的标题，它是ECharts中的一个比较简单的组件。 图例组件（legend）也

直角坐标系下有3种类型的坐标轴（axis）：类目型（category）、数值型（value）和时间型（time）。 （1）类目型：必须指定类目列表，坐标轴内有且仅有这些指定类目坐标。 （2）数值型：需

使用ECharts绘制图表时，可能会发现图表真正的绘图区域和图表容器之间有一些间隔，有时看上去不太协调。查看相关API可以得知，可以通过调整几个属性值控制绘图区域与容器之间的间距。 因此，需要了解直角