Apache ECharts教程
文章平均质量分 89
Apache ECharts教程
月满闲庭
资深IT工作者
展开
-
在图表中支持无障碍访问
在图表中支持无障碍访问W3C 制定了无障碍富互联网应用规范集(WAI-ARIA,the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。Apache EChartsTM 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。默认关闭,需要通过将 aria.enabled 设置为 true 开启。开启后,会根据图表、数据、标题等情况,自动智原创 2021-06-26 20:31:57 · 373 阅读 · 1 评论 -
自定义系列
自定义系列自定义系列(custom series),是一种系列的类型。它把绘制图形元素这一步留给开发者去做,从而开发者能在坐标系中自由绘制出自己需要的图表。Apache EChartsTM 为什么会要支持 自定义系列 呢?ECharts 内置支持的图表类型是最常见的图表类型,但是图表类型是难于穷举的,有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面,所提供的扩展方式要尽可能得简单,例如图形元素创建和释放、过渡动画、tooltip、数据区域缩放(da原创 2021-06-26 20:30:40 · 259 阅读 · 1 评论 -
ECharts 5 新特性
数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具,而在交互、性能、数据处理等方面有了更高级的需求。Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5,我们着力加强了图表的叙事能力,让开发者可以以更简单的方式,讲述数据背后的故事。“表·达”是 Apache ECharts 5 的核心,通过五大模块、十五项特性的全面升级,围绕可视化作品的叙事表达能力,让图“表”更能传“达”数据背原创 2021-06-24 15:07:13 · 1194 阅读 · 1 评论 -
个性化图表的样式
Apache EChartsTM 提供了丰富的自定义配置选项,并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图:绘制南丁格尔图5分钟上手ECharts 中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目。因为不在直角坐标系上,所以也不需要xAxis,yAxis。myChart.setOption({ series原创 2021-06-24 15:19:47 · 387 阅读 · 0 评论 -
服务端渲染
服务端渲染Apache EChartsTM 可以在服务端进行渲染。例如 官方示例 里的一个个小截图,就是在服务端预生成出来的。服务端渲染可以使用流行的 headless 环境,例如 puppeteer、headless chrome、node-canvas、jsdom、PhantomJS 等。这是一些社区贡献的 echarts 服务端渲染方案:https://github.com/hellosean1025/node-echartshttps://github.com/chfw/echarts-原创 2021-06-26 20:31:09 · 323 阅读 · 0 评论 -
使用 transform 进行数据转换第一部分
Apache EChartsTM 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(dataset)和一个“转换方法”(transform),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。抽象地来说,数据转换是这样一种公式:outData = f(inputData)。f 是转换方法,例如:filter、sort、regression、boxplo原创 2021-06-25 06:37:40 · 2085 阅读 · 2 评论 -
ECharts 中的事件和行为
在 Apache EChartsTM 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。在 ECharts 3 中绑定事件跟 2 一样都是通过 on 方法,但是事件名称比 2 更加简单了。ECharts 3 中,事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。myChart.on('click', function (params) { // 控制台打印数据的名称原创 2021-06-25 06:39:36 · 771 阅读 · 0 评论 -
使用 transform 进行数据转换第二部分
数据转换器 “filter”echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 transform.type: “filter”,以及给出数据筛选条件。如下例:option = { dataset: [{ source: [ ['Product', 'Sales', 'Price', 'Year'], ['Cake', 123, 32, 2011], ['Latte', 231, 14, 201原创 2021-06-25 06:37:22 · 720 阅读 · 2 评论 -
数据的视觉映射
数据可视化是 数据 到 视觉元素 的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。Apache EChartsTM 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到『线』,柱状图把数据映射到『长度』。一些更复杂的图表,如 graph、事件河流图、treemap 也都会做出他们内置的映射。此外,ECharts 还提供了 visualMap 组件 来提供通用的视觉映射。visualMap 组件中可以使用的视觉元素有:图形类别(symbol)、图形大小(symbolSize)原创 2021-06-25 06:38:28 · 557 阅读 · 1 评论 -
ECharts 中的样式简介
本文主要是大略概述,用哪些方法,可以在 Apache EChartsTM 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。之所以用“样式”这种可能不很符合数据可视化思维的词,是因为,比较通俗易懂。本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。颜色主题(Theme)调色盘直接样式设置(itemStyle、lineStyle、areaStyle、label、…)视觉映射(visualMap)其他关于样式的文章,参见:原创 2021-06-24 15:22:45 · 357 阅读 · 1 评论 -
小例子:自己实现拖拽
介绍一个实现拖拽的小例子。这个例子是在原生 Apache EChartsTM 基础上做了些小小扩展,带有一定的交互性。通过这个例子,我们可以了解到,如何使用 ECharts 提供的 API 实现定制化的富交互的功能。这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中可视化得编辑。所以我们从这个简单的例子开始。echarts 本身没有提供封装好的『拖拽改变图表』功能,因为现在认为这个功能并不足够有通用性。那么这个功能就原创 2021-06-25 06:40:22 · 275 阅读 · 1 评论 -
5 分钟上手 ECharts
更多关于Apache ECharts的文档,请阅读:Apache ECharts文档专题获取 ECharts你可以通过以下几种方式获取 Apache EChartsTM。从 Apache ECharts 官网下载界面 获取官方源码包后构建。在 ECharts 的 GitHub 获取。通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”通过 jsDelivr 等 CDN 引入引入 E原创 2021-06-24 14:58:10 · 784 阅读 · 0 评论 -
地理坐标系和地图系列的 SVG 底图
地理坐标系和地图系列的 SVG 底图从 v5.1.0 开始,ECharts 支持在 地理坐标系(geo) 和 地图系列(map series) 中使用 SVG 作为底图。之前只支持 GeoJSON 格式的底图。有了这个功能,ECharts 能在任一种渲染模式(canvas 渲染模式和 svg 渲染模式)中绘制 SVG 底图,并且能够只用简单的 ECharts 配置项(option)就带来 放大、平移、点选(select)、高亮强调(emphasis)、聚焦-淡出(focus-blur)、标签(label原创 2021-06-26 20:31:33 · 2588 阅读 · 2 评论 -
动态排序柱状图
动态排序柱状图是一种展示随时间变化的数据排名变化的图表,从 ECharts 5 开始内置支持。动态排序柱状图通常是横向的柱条,如果想要采用纵向的柱条,只要把本教程中的 X 轴和 Y 轴相反设置即可。yAxis.realtimeSort 设为 true,表示开启 Y 轴的动态排序效果yAxis.inverse 设为 true,表示 Y 轴从下往上是从小到大的排列yAxis.animationDuration 建议设为 300,表示第一次柱条排序动画的时长yAxis.animationDuratio原创 2021-06-25 06:40:07 · 1742 阅读 · 2 评论 -
在图表中加入交互组件
除了图表外 Apache EChartsTM 中,提供了很多交互组件。例如:图例组件 legend标题组件 title视觉映射组件 visualMap数据区域缩放组件 dataZoom时间线组件 timeline下面以 数据区域缩放组件 dataZoom 为例,介绍如何加入这种组件。数据区域缩放组件(dataZoom)介绍『概览数据整体,按需关注数据细节』是数据可视化的基本交互需求。dataZoom 组件能够在直角坐标系(grid)、极坐标系(polar)中实现这一功能。如下例子:原创 2021-06-25 06:37:56 · 223 阅读 · 1 评论 -
使用 Canvas 或者 SVG 渲染
使用 Canvas 或者 SVG 渲染浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。Apache EChartsTM 从初始一直使用 Canvas 绘制图表(除了对 IE8- 使用 VML)。而 ECharts v4.0 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 renderer原创 2021-06-26 20:31:22 · 532 阅读 · 0 评论 -
移动端自适应
Apache EChartsTM 工作在用户指定高宽的 DOM 节点(容器)中。ECharts 的『组件』和『系列』都在这个 DOM 节点中,每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局,因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时,这种方式并不能自动避免组件重叠的情况,尤其在移动端小屏的情况下。另外,有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。为了解决这个问题,ECharts原创 2021-06-25 06:38:12 · 183 阅读 · 0 评论 -
异步数据加载和更新
异步加载入门示例中的数据是在初始化后 setOption 中直接填入的,但是很多时候可能数据需要异步加载后再填入。Apache EChartsTM 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。var myChart = echarts.init(document.getElementById('main'));$.get('data.json').done(function (data) {原创 2021-06-24 15:25:07 · 413 阅读 · 0 评论 -
在打包环境中使用 ECharts
假如你的开发环境使用了npm或者yarn等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache EChartsTM 并通过 treeshaking 只打包需要的模块。NPM 安装 ECharts你可以使用如下命令通过 npm 安装 EChartsnpm install echarts --save引入 EChartsimport * as echarts from 'echarts';// 基于准备好的dom,初始化echarts实例var myCh原创 2021-06-24 15:12:10 · 514 阅读 · 0 评论 -
富文本标签
富文本标签在许多地方(如图、轴的标签等)都可以使用富文本标签。例如:其他一些例子: Map Labels, Pie Labels, Gauge.原先 Apache EChartsTM 中的文本标签,只能对整块统一进行样式设置,并且仅仅支持颜色和字体的设置,从而导致不易于制作表达能力更强的文字描述信息。echarts v3.7 以后,支持了富文本标签,能够:定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等原创 2021-06-26 20:30:56 · 899 阅读 · 1 评论 -
Apache ECharts教程
Apache ECharts教程5 分钟上手 EChartsECharts 5 新特性ECharts 5 升级指南在打包环境中使用 EChartsECharts 基础概念概览个性化图表的样式ECharts 中的样式简介异步数据加载和更新使用 dataset 管理数据使用 transform 进行数据转换在图表中加入交互组件移动端自适应数据的视觉映射ECharts 中的事件和行为动态排序柱状图小例子:自己实现拖拽小例子:实现日历图旭日图自定义系列富文本标签服务端渲染原创 2021-06-18 10:19:46 · 888 阅读 · 0 评论 -
在微信小程序中使用 ECharts
在微信小程序中使用 ECharts我们接到了很多微信小程序开发者的反馈,表示他们强烈需要像 Apache EChartsTM 这样的可视化工具。但是微信小程序是不支持 DOM 操作的,Canvas 接口也和浏览器不尽相同。因此,我们和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式,快速开发图表,满足各种可视化需求。体验示例小程序在微信中扫描下面的二维码即可体验 ECharts Demo:下载为了兼容小程序 Canvas,我们提供原创 2021-06-26 20:32:27 · 551 阅读 · 1 评论 -
ECharts 基础概念概览
本文介绍 Apache EChartsTM 最基本的名词和概念。echarts 实例一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等(用 option 来描述)。准备一个 DOM 节点(作为 echarts 的渲染容器),就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。系列(series)系列(series)是很常见的名词。在 echarts 里,系列(series)是指:一组数值以及他们映射成的原创 2021-06-24 15:15:54 · 373 阅读 · 0 评论 -
旭日图(Sunburst)
旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。引入相关文件旭日图是 Apache EChartsTM 4.0 新增的图表类型,从 CDN 引入完整版的 echarts.min.js最简单的旭日图创建旭日图需要在 series 配置项中声明类型为 ‘sunburst’ 的系列,并且以树形结构声明其 data:var option = { series: { type原创 2021-06-26 20:32:35 · 2067 阅读 · 1 评论 -
使用 ECharts GL 实现基础的三维可视化
使用 ECharts GL 实现基础的三维可视化ECharts GL (后面统一简称 GL)为 Apache EChartsTM 补充了丰富的三维可视化组件,这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话,也可以很快的上手 GL,GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。在看完文章之后,你可以前往 官方示例 和 Gallery 去了解更多使用 GL 制作的示例,对于文章中我们没法解释到的代码,也可以前往 GL原创 2021-06-26 20:32:08 · 1733 阅读 · 1 评论 -
使用 dataset 管理数据
Apache EChartsTM 4 开始支持了 dataset 组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。ECharts 4 以前,数据只能声明在各个“系列(series)”中,例如:option = { xAxis: { type: 'category', data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Wal原创 2021-06-24 15:38:12 · 382 阅读 · 1 评论 -
小例子:实现日历图
在 Apache EChartsTM 中,我们新增了日历坐标系,如何快速写出一个日历图呢?通过以下三个步骤即可实现上述效果:第一步:引入js文件下载的最新完整版本 echarts.min.js 即可,无需再单独引入其他文件哦<script src="echarts.min.js"></script><script> // ...</script>第二步:指定DOM元素作为图表容器和ECharts中的其他图表一样,创建一个DOM来作为原创 2021-06-25 06:41:08 · 309 阅读 · 0 评论 -
eCharts 特性 第二部分
更多关于Apache ECharts的文档,请阅读:Apache ECharts文档专题移动端优化ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积,可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘。多渲染方案,跨平台使用!ECharts 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。V原创 2021-06-24 14:48:35 · 630 阅读 · 0 评论 -
ECharts 5 升级指南
ECharts 5 升级指南本指南面向那些希望将 echarts 4.x(以下简称 v4)升级到 echarts 5.x(以下简称 v5)的用户。大家可以在 ECharts 5 新特性 中了解这次v5带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,v5 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,v5 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使原创 2021-06-25 06:38:49 · 3664 阅读 · 1 评论 -
eCharts 特性 第一部分
更多关于Apache ECharts的文档,请阅读:Apache ECharts文档专题ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。丰富的可视化类型ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的原创 2021-06-24 14:42:58 · 216 阅读 · 0 评论