-
ECharts-13-模拟实现 3D 效果
背景 有时候，为了炫酷。 产品会提一些花里胡哨的需求，比如展示一个柱状图，但是要求有 3D 效果。 基于 Echarts <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <...2017-05-27 05:15:25 | UI
-
ECharts-12-旭日图
ECharts 旭日图 旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。 ECharts 创建旭日图很简单，只需要在 series 配置项中声明类型为 sunburst 即可，data 数据结构以树形结构声明，看下一个简单的实例： var option = { serie...2017-05-27 05:15:25 | UI
-
ECharts-11-events ECharts 事件处理
ECharts 事件处理 ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。 ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。 ECharts 中事件分为两种类型: 用户鼠标操作点击，如 ‘click’、’dblclick’、’mousedown’、’mousemove’、’mouseup’、’mouseover’、’mouseout’、’g...2017-05-27 05:15:25 | UI
-
ECharts-10-ECharts 数据的视觉映射
ECharts 数据的视觉映射 数据可视化简单来讲就是将数据用图表的形式来展示，专业的表达方式就是数据到视觉元素的映射过程。 ECharts 的每种图表本身就内置了这种映射过程，我们之前学习到的柱形图就是将数据映射到长度。 此外，ECharts 还提供了 visualMap 组件 来提供通用的视觉映射。 visualMap 组件中可以使用的视觉元素有： 图形类别（s...2017-05-27 05:15:25 | UI
-
ECharts-09-midea 交互式
ECharts 响应式 ECharts 图表显示在用户指定高宽的 DOM 节点（容器）中。 有时候我们希望在 PC 和 移动设备上都能够很好的展示图表的内容，实现响应式的设计，为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 CSS Media Query 的自适应能力。 ECharts 组件的定位和布局 大部分『组件』和『系列』会遵循两种定位方式。 left...2017-05-27 05:15:25 | UI
-
ECharts-08-interaction 交互
ECharts 交互组件 ECharts 提供了很多交互组件：例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline。 接下来的内容我们将介绍如何使用数据区域缩放组件 dataZoom。 dataZoom dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。 默认情况下 data...2017-05-27 05:15:25 | UI
-
ECharts-07-dataset 数据集
ECharts 数据集（dataset） ECharts 使用 dataset 管理数据。 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。 下面是一个最简单的 dataset 的例子： option = { legend: {}, tooltip: {}, dataset: { ...2017-05-27 05:15:25 | UI
-
ECharts-06-axis 坐标轴
坐标轴 直角坐标系中的 x/y 轴。 x 轴、y 轴 x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据 普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下： option = { xAxis: { // ... }, yAxis: { ...2017-05-27 05:15:25 | UI
Echo Blog
江湖无名 安心练剑