⑴ECharts 全称 Apache ECharts,是Apache基于 JavaScript 开发的免费开源可视化图表库,可以流畅的运行在 PC
⑵和移动设备上,兼容当前绝大部分浏览器和设备,底层依赖矢量图形库
⑶ZRender,旨在为用户提供商业常用图标,非常方便实用;ECharts界面简洁友好操作简单便捷且交互丰富,可让用户高度个性化的定制数据可视化图表,该软件内置常规的折线图柱状图散点图饼图K线图,以及用于地理的地图热力图等,且该软件支持任意维度的堆积和多图表混合展现,可以说是一个不可多得的图表库。
⑷动画对于人类认知的重要性不言而喻。在之前的作品中,我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系,让图表的出现和变换显得不那么生硬。
⑸视觉设计的作用并不仅仅是为了让图表更好看,更重要的是,符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容,并且尽可能消除不良设计带来的误解。
⑹标签是图表中的核心元素之一,清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts
⑺提供了多种新的标签功能,让密集的标签能清晰显示准确表意。
⑻Apache ECharts
⑼带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息,并且提供了更灵活的定制化能力,让开发者根据不同的需求定制时间轴的标签内容。
⑽提示框(Tooltip是一种最常用的可视化组件,可以帮助用户交互式地了解数据的详细信息。
⑾圆角可以带来更美观而柔和的视觉,也能够赋予更多的创造力
⑿我们在设计新版默认主题样式的时候,将无障碍设计作为一个重要的考量依据,对颜色的明度和色值都进行反复测试,帮助视觉辨识障碍用户清楚地识别图表数据。
⒀ECharts提供了贴花的功能,用图案辅助颜色表达,进一步帮助用户区分数据。
⒁丰富的可视化类型
⒂多种数据格式无需转换直接使用
⒃千万数据的前端展现以及移动端优化
⒄多渲染方案,跨平台使用!
⒅深度的交互式数据探索
⒆多维数据的支持以及丰富的视觉编码手段
⒇动态数据绚丽的特效
⒈通过GL实现更多更
⒉强大绚丽的三维可视化以及无障碍访问
⒊获取 ECharts
⒋你可以通过以下几种方式获取 Apache EChartsTM。
⒌从 Apache ECharts 官网下载界面 获取官方源码包后构建。
⒍在 ECharts 的 GitHub 获取。
⒎通过 npm 获取 echarts,npm install echarts --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以及其他的关于这些数据如何映射成图的参数。
②里系列类型(series.type就是图表类型。系列类型(series.type至少有:line(折线图bar(柱状图pie(饼图scatter(散点图graph(关系图tree(树图...
③如下图,右侧的 option 中声明了三个
④系列(series:pie(饼图系列line(折线图系列bar(柱状图系列,每个系列中有他所需要的数据(series.data。
⑤类同地,下图中是另一种配置方式,系列的数据从 dataset 中取:
⑥组件(ponent在系列之上,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: 表示:距离 echarts 容器底边界 像素。
㈡或者基于 echarts 容器高宽的百分比(例如 right: '%' 表示:距离 echarts 容器右边界的距离是 echarts 容器宽度的
㈢如下图的例子,对 grid 组件(也就是直角坐标系的底板设置 leftrightheightbottom 达到的效果。
㈣我们可以注意到,left right width 是一组(横向top bottom height
㈤是另一组(纵向。这两组没有什么关联。每组中,至多设置两项就可以了,第三项会被自动算出。例如,设置了 left 和 right 就可以了,width
㈥[中心半径定位]
㈦少数圆形的组件或系列,可以使用“中心半径定位”,例如,pie(饼图sunburst(旭日图polar(极坐标系。
㈧中心半径定位,往往依据 center(中心radius(半径来决定位置。
㈨少数组件和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。
㈩坐标系很多系列,例如 line(折线图bar(柱状图scatter(散点图heatmap(热力图等等,需要运行在 “坐标系”
上。坐标系用于布局这些图,以及显示数据的刻度等等。例如 echarts 中至少支持这些坐标系:直角坐标系极坐标系地理坐标系(GEO单轴坐标系日历坐标系
等。其他一些系列,例如 pie(饼图tree(树图等等,并不依赖坐标系,能独立存在。还有一些图,例如
graph(关系图等,既能独立存在,也能布局在坐标系中,依据用户的设定而来。
一个坐标系,可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中,包括有 xAxis(直角坐标系 X 轴yAxis(直角坐标系 Y
轴grid(直角坐标系底板三种组件。xAxisyAxis 被 grid 自动引用并组织起来,共同工作。
我们来看下图,这是最简单的使用直角坐标系的方式:只声明了 xAxisyAxis 和一个 scatter(散点图系列,echarts
暗自为他们创建了 grid 并关联起他们:
再来看下图,两个 yAxis,共享了一个 xAxis。两个 series,也共享了这个 xAxis,但是分别使用不同的 yAxis,使用
yAxisIndex 来指定它自己使用的是哪个 yAxis:
再来看下图,一个 echarts 实例中,有多个 grid,每个 grid 分别有 xAxisyAxis,他们使用
xAxisIndexyAxisIndexgridIndex 来指定引用关系:
另外,一个系列,往往能运行在不同的坐标系中。例如,一个 scatter(散点图能运行在 直角坐标系极坐标系 地理坐标系(GEO
等各种坐标系中。同样,一个坐标系,也能承载不同的系列,如上面出现的各种例子,直角坐标系 里承载了 line(折线图bar(柱状图等等。