ECharts下载-商业产品常用图表 v5.0.2

软件介绍

ECharts全称ApacheECharts，是Apache基于JavaScript开发的免费开源可视化图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器和设备，底层依赖矢量图形库ZRender，旨在为用户提供商业常用图标，非常方便实用；ECharts界面简洁友好、操作简单便捷且交互丰富，可让用户高度个性化的定制数据可视化图表，该软件内置常规的折线图、柱状图、散点图、饼图、K线图，以及用于地理的地图、热力图等，且该软件支持任意维度的堆积和多图表混合展现，可以说是一个不可多得的图表库。

软件功能

动态叙事

动画对于人类认知的重要性不言而喻。在之前的作品中，我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系，让图表的出现和变换显得不那么生硬。

视觉设计

视觉设计的作用并不仅仅是为了让图表更好看，更重要的是，符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容，并且尽可能消除不良设计带来的误解。

标签

标签是图表中的核心元素之一，清晰而明确的标签可以帮助用户对数据有更准确的理解。ApacheECharts5提供了多种新的标签功能，让密集的标签能清晰显示、准确表意。

时间轴

ApacheECharts5带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息，并且提供了更灵活的定制化能力，让开发者根据不同的需求定制时间轴的标签内容。

提示框

提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息。

扇形圆角

圆角可以带来更美观而柔和的视觉，也能够赋予更多的创造力

主题配色

我们在设计新版默认主题样式的时候，将无障碍设计作为一个重要的考量依据，对颜色的明度和色值都进行反复测试，帮助视觉辨识障碍用户清楚地识别图表数据。

贴花图案

ECharts提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。

软件特色

丰富的可视化类型

多种数据格式无需转换直接使用

千万数据的前端展现以及移动端优化

多渲染方案,跨平台使用!

深度的交互式数据探索

多维数据的支持以及丰富的视觉编码手段

动态数据、绚丽的特效

通过GL实现更多更

强大绚丽的三维可视化以及无障碍访问

官方教程

获取ECharts

你可以通过以下几种方式获取ApacheEChartsTM。

从ApacheECharts官网下载界面获取官方源码包后构建。

在ECharts的GitHub获取。

通过npm获取echarts，npminstallecharts--save，详见“在webpack中使用echarts”

通过jsDelivr等CDN引入

引入ECharts

通过标签方式直接引入构建好的echarts文件

绘制一个简单的图表

在绘图前我们需要为ECharts准备一个具备高宽的DOM容器。

然后就可以通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱状图，下面是完整代码。

这样你的第一个图表就诞生了！

echarts实例一个网页中可以创建多个echarts实例。每个echarts实例中可以创建多个图表和坐标系等等（用option来描述）。准备一个DOM节点（作为echarts的渲染容器），就可以在上面创建一个echarts实例。每个echarts实例独占一个DOM节点。

系列（series）系列（series）是很常见的名词。在echarts里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在echarts中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

echarts里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...

如下图，右侧的option中声明了三个系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的数据（series.data）。

类同地，下图中是另一种配置方式，系列的数据从dataset中取：

组件（component）在系列之上，echarts中各种内容，被抽象为“组件”。例如，echarts中至少有这些组件：xAxis（直角坐标系X轴）、yAxis（直角坐标系Y轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...

我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。

如下图，右侧的option中声明了各个组件（包括系列），各个组件就出现在图中。

注：因为系列是一种特殊的组件，所以有时候也会出现“组件和系列”这样的描述，这种语境下的“组件”是指：除了“系列”以外的其他组件。

用option描述图表上面已经出现了option这个概念。echarts的使用者，使用option来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option表述了：数据、数据如何映射成图形、交互行为。

系列里的series.data是本系列的数据。而另一种描述方式，系列数据从dataset中取：

组件的定位

不同的组件、系列，常有不同的定位方式。

[类CSS的绝对定位]

多数组件和系列，都能够基于top/right/down/left/width/height绝对定位。这种绝对定位的方式，类似于CSS的绝对定位（position:absolute）。绝对定位基于的是echarts容器DOM节点。

其中，他们每个值都可以是：

绝对数值（例如bottom:54表示：距离echarts容器底边界54像素）。

或者基于echarts容器高宽的百分比（例如right:'20%'表示：距离echarts容器右边界的距离是echarts容器宽度的20%）。

如下图的例子，对grid组件（也就是直角坐标系的底板）设置left、right、height、bottom达到的效果。

我们可以注意到，leftrightwidth是一组（横向）、topbottomheight是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了left和right就可以了，width会被自动算出。

[中心半径定位]

少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。

中心半径定位，往往依据center（中心）、radius（半径）来决定位置。

[其他定位]

少数组件和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。

坐标系很多系列，例如line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在“坐标系”上。坐标系用于布局这些图，以及显示数据的刻度等等。例如echarts中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系等。其他一些系列，例如pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。

一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有xAxis（直角坐标系X轴）、yAxis（直角坐标系Y轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis被grid自动引用并组织起来，共同工作。

我们来看下图，这是最简单的使用直角坐标系的方式：只声明了xAxis、yAxis和一个scatter（散点图系列），echarts暗自为他们创建了grid并关联起他们：

再来看下图，两个yAxis，共享了一个xAxis。两个series，也共享了这个xAxis，但是分别使用不同的yAxis，使用yAxisIndex来指定它自己使用的是哪个yAxis：

再来看下图，一个echarts实例中，有多个grid，每个grid分别有xAxis、yAxis，他们使用xAxisIndex、yAxisIndex、gridIndex来指定引用关系：

另外，一个系列，往往能运行在不同的坐标系中。例如，一个scatter（散点图）能运行在直角坐标系、极坐标系、地理坐标系（GEO）等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，直角坐标系里承载了line（折线图）、bar（柱状图）等等。

Tags:ECharts下载,商业产品常用图表,源码相关,图表工具