当前搜索:

ECharts官方教程(十四)【使用 Canvas 或者 SVG 渲染】

使用 Canvas 或者 SVG 渲染浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。ECharts 从初始一直...
阅读(1239) 评论(0)

ECharts官方教程(十三)【富文本标签】

富文本标签在许多地方(如图、轴的标签等)都可以使用富文本标签。例如:其他一些例子: Map Labels, Pie Labels, Gauge.原先 echarts 中的文本标签,只能对整块统一进行样式设置,并且仅仅支持颜色和字体的设置,从而导致不易于制作表达能力更强的文字描述信息。echarts...
阅读(1030) 评论(0)

ECharts官方教程(十二)【自定义系列】

自定义系列自定义系列(custom series),是一种系列的类型。它把绘制图形元素这一步留给开发者去做,从而开发者能在坐标系中自由绘制出自己需要的图表。echarts 为什么会要支持 自定义系列 呢?echarts 内置支持的图表类型是最常见的图表类型,但是图表类型是难于穷举的,有很多小众的需...
阅读(952) 评论(0)

ECharts官方教程(十一)【小例子:实现日历图】

小例子:实现日历图在ECharts中,我们新增了日历坐标系,如何快速写出一个日历图呢?通过以下三个步骤即可实现上述效果:第一步:引入js文件下载的最新完整版本echarts.min.js即可,无需再单独引入其他文件哦<script src="echarts.min.js"...
阅读(884) 评论(0)

ECharts官方教程(十)【小例子:自己实现拖拽】

小例子:自己实现拖拽介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展,带有一定的交互性。通过这个例子,我们可以了解到,如何使用 echarts 提供的 API 实现定制化的富有交互的功能。这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子...
阅读(1052) 评论(0)

ECharts官方教程(九)【ECharts中的事件和行为】

ECharts 中的事件和行为在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。在 ECharts 3 中绑定事件跟 2 一样都是通过 on 方法,但是事件名称比 2 更加简单了。...
阅读(354) 评论(0)

ECharts官方教程(八)【数据的视觉映射】

数据的视觉映射数据可视化是 数据 到 视觉元素 的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到『线』,柱状图把数据映射到『长度』。一些更复杂的图表,如 graph、事件河流图、treemap 也都会做出他...
阅读(376) 评论(0)

ECharts官方教程(七)【移动端自适应】

移动端自适应ECharts 工作在用户指定高宽的 DOM 节点(容器)中。ECharts 的『组件』和『系列』都在这个 DOM 节点中,每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局,因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时,这种方式并不能自...
阅读(776) 评论(0)

ECharts官方教程(六)【在图表中加入交互组件】

在图表中加入交互组件除了图表外 ECharts 中,提供了很多交互组件。例如:图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline下面以 数据区域缩放组件 dataZoom 为例,介绍如何加入这种组件。数据...
阅读(447) 评论(0)

ECharts官方教程(五)【异步数据加载和更新】

异步加载入门示例中的数据是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。var myChart ...
阅读(430) 评论(0)

ECharts官方教程(四)【个性化图表的样式】

ECharts 提供了丰富的自定义配置选项,并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图:绘制南丁格尔图上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据...
阅读(512) 评论(0)

ECharts官方教程(三)【在webpack中使用 ECharts】

在 webpack 中使用 EChartsWebpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。npm 安装 ECharts在 3.1.1 版本之前 EChart...
阅读(327) 评论(0)

ECharts官方教程(二)【自定义构建 ECharts】

一般来说,可以直接从 echarts 下载页 中获取构建好的 echarts,也可以从 GitHub 中的 echarts/dist 文件夹中获取构建好的 echarts,这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制: 完全版:echarts/dist/ec...
阅读(335) 评论(0)

ECharts官方教程(一)【5分钟上手ECharts】

获取 ECharts你可以通过以下几种方式获取 ECharts。从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。在 ECharts 的 GitHub 上...
阅读(376) 评论(0)
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 146万+
    积分: 2万+
    排名: 495
    博客专栏
    文章分类
    微信公众号