知识共享许可协议

ECharts 3.2.0 变动介绍

在 6 月 30 这个 ECharts 三周年之际我们发布了 3.2.0,这个版本是 ECharts 进入 3 之后最大的一次升级,新增的特性中有些是大家反复提了好久的,有些是我们自己想了很久的,有些我们在实现后光看看效果都觉得非常激动,有些可能看不出来区别但是我们也在底层做了很多工作。

希望这个开发了长达一个多月时间的新版本不会让大家失望。

新版本都有哪些东西?

在功能方面,这个版本新增了 brush(刷选),markArea,单轴等组件,除此之外对已有的图表组件,比如折线图,线图,dataZoom,坐标轴等做了或多或少的增强和优化,当然还有一些 bug 的修复。

这个版本在底层的性能上也做了很多的优化工作,首先直观的用数据来说大部分场景底层重绘的效率是原先的 2x~3x。其次是引入了渐进式渲染和单独的高亮层防止图形很多的时候交互和重绘带来很严重的阻塞。

同时我们官网还新增了一款 主题编辑器 方便大家编辑自己的主题

下面会一一介绍这些新特性。多图流量党慎入! 完整无图的 changelog 见 这里

阅读全部

ECharts 实现地图散点图(下)

上一篇我们介绍了如何使用 ehcarts 内置地图实现地图上绘制的散点图,这篇中,我们将讲解如何在百度地图上绘制散点图。

阅读全部

如何在ES6中管理类的私有数据

原文:http://www.2ality.com/2016/01/private-data-classes.html

如何在ES6中管理类的私有数据?本文为你介绍四种方法:

  • 在类的构造函数作用域中处理私有数据成员
  • 遵照命名约定(例如前置下划线)标记私有属性
  • 将私有数据保存在WeakMap中
  • 使用Symbol作为私有属性的键
阅读全部

ECharts 实现地图散点图(上)

ECharts 作为国内应用最广泛的前端可视化生成工具,提供了丰富的图表展现方式和便捷的图表操作。 ECharts 支持 geoJson 格式的地图,并且官网上提供了现成的 world,china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 ECharts 实现一个中国地图上绘制的散点图。

阅读全部

前端文本截断

误区

在设计产品时,由于不少产品经理、工程师并没有「字符不一定等宽」的概念,往往会给出「超过 n 个字符截断显示,英文数字算一个字符,汉字算两个字符」这样的需求。要知道,这里面的问题有很多:

为了显示效果,前端往往会采用优先西文字体族的 font-family 设置,即西文字符用西文字体,汉字用中文字体,这就很容易使得文本的宽度不好根据字符数来控制。首先,非代码的内容本身就不一定适合用等宽西文字体显示。其次即使用了等宽西文字体,汉字也基本不可能正好是其两倍宽。满足这个需求的,只能放弃西文字体,让西文字符也使用中文字体,并且使用中易系列的几个字体了(比如 SimSun,也就是 Windows 下的「宋体」)。(丑不说,还只能满足 Windows 下的需求。)

这种需求甚至在很多时候还会和某些字符编码长度的概念产生混淆,催生「长度限制 n 个字节,其中英文数字算 1 字节、汉字算 2 字节」这样的奇葩说法。

顺便歪个楼,这种「西文等宽、汉字占两倍宽度」的需求正常情况下只会存在于程序员的代码编辑器里。如果你是这种强迫症晚期,又不想用中易宋体,可以考虑试试 Belleve 制作的 Inziu

思路和原理

对于前端来说,数据库存储的限制不应该是我们需要关心的问题。看下前面的「伪需求」,我们实际的需求往往是从视觉角度出发的「超出特定高度截断显示」或「超出特定行数阶段显示」两种。由于实现方式的差异,其实可以分为「单行截断」、「多行截断」、「按高度截断」几种。从成本和效果来看,有「实现难度」、「效果精确度」、「对内容是否有限制」、「是否能响应页面变化」这些需要考虑的细节。本文里不准备列各种实现的代码,仅谈谈一些相关的问题和思路。

要看一些现有的实现方案可以看这几篇:

阅读全部

使用 SVG 输出 Octicon

原文:https://github.com/blog/2112-delivering-octicons-with-svg

GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显,但你马上就能体会到 SVG 图标的优点。

Octicon 上的对比

Octicon 上的对比

切换到 SVG 以后,图标会作为图片渲染而非文字,这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的 SVG 版本。

为何使用 SVG?

图标字体渲染问题

图标字体从来只是一种 hack。我们之前使用一个自定义字体,并将图标作为 Unicode 符号。这样图标字体就可以通过打包后的 CSS 来引入。只要简单地在任意元素上添加一个 class,图标就可以显示出来。然后我们只使用 CSS 就能即时改变图标的尺寸和颜色了。

不幸的是,虽然这些图标是矢量图形,但在 1x 显示屏下的渲染效果并不理想。在基于 WebKit 的浏览器下,图标可能会在某些窗口宽度下变得模糊。因为此时图标是作为文本输出的,本来用于提高文本可读性的次像素渲染技术反而使图标看起来糟糕许多。

对页面渲染的改进

因为我们直接将 SVG 注入 HTML,所以不再会出现图标字体下载、缓存、渲染过程中出现的样式闪动(这也是我们选择这种方式更主要的原因)。

页面闪动

页面闪动

阅读全部