ECharts v3.6 发布:自定义系列、极坐标柱状图

在 ECharts 新发布的 3.6 版本中,新增了 自定义系列(custom series),能让用户定制渲染逻辑,从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。

自定义系列

图表的类型多种多样,有些大众有些小众,echarts 难于内置得支持所有类型的图表。所以推出了 自定义系列(custom series)

自定义系列可以自定义系列中的图形元素渲染。从而能扩展出不同的图表。同时,echarts 会统一管理图形的创建删除、动画、与其他组件(如 dataZoomvisualMap)的联动,使用户不必纠结这些细节。

例如,下面的例子使用 custom series 扩展出了 x-range 图:

可以注意到,里面须用户自定义的渲染逻辑,在 renderItem 这个函数中,并不十分复杂。但是得到的功能是比较完备的。

var option = {
    ...,
    series: [{
        type: 'custom',
        renderItem: function (params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;

            return {
                type: 'rect',
                shape: echarts.graphic.clipRectByRect({
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                }, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                }),
                style: api.style()
            };
        },
        data: data
    }]
}

下面的两个例子使用 custom series 扩展出了 error-chart 图:

下面是其他一些例子:

极坐标柱状图

极坐标中的柱状图,可以按径向排布或者切向排布。

使用时,只需要将系列的 coordinateSystem 设置为 'polar',将原先笛卡尔坐标系中使用的 xAxisyAxis 替换成 radiusAxisangleAxis,就能使用极坐标系的柱状图了。

其他

此外,

  • 支持了encode 设定,可以指定 data 中哪些维度映射到坐标系中哪个轴,或者哪些维度在 tooltip 以及 label 中显示。
  • 支持了 dimensions 设定,能指定 data 中每个维度的名称和类型。名称可以显示在默认 tooltip 中。
  • dataZoom 组件进行了增强。比如,支持了『按住 'ctrl'/'alt'/'shift' 和滚轮时才能出发缩放平移』功能,避免和页面的滚动冲突(参见 moveOnMouseMovezoomOnMouseWheel。另外支持了 minSpanmaxSpan 等细节配置。

更多的升级信息,参见 changelog

更多相关信息

在 ECharts GL 中绘制三维地图

ECharts 前段时间发布了超亮眼的 GL,相对于之前已经圈粉无数的 ECharst-X 而言,ECharst GL 更是帅到爆,无论是性能、颜值、类型都有了巨大的飞跃。但是不是更易上手呢?答案是肯定的,用户除了能够根据数据画出诸如三维地图等三维的可视化图之外,只需要在项目中加入几个简单的配置项,就能配制出想要的风格的高质量画面效果。

新版本 扩展 教程

ECharts 统计扩展教程

你是否想了解一组样本数据的分布情况?你是否想根据用户的数值属性将用户分成不同的群体?你是否想预测两个变量的变化趋势?——什么?不需要?不要再违心了,小编已经听到来自你们内心深处的呐喊,今天就为大家推荐一款神器——ECharts 统计扩展,这是一个用来进行数据分析的扩展工具,包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合,可以使大家方便地实现可视分析,也就是将数据分析的结果,通过可视化直观地呈现出来。

新版本 扩展 教程

那些年我们一起学过的直方图

某天下午小编正在安安静静地撸代码,突然听说在我们的[gallery](http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)上,有用户提出,[ECharts](http://echarts.baidu.com/index.html)不支持直方图,什么?这怎么能忍?于是小编将珍藏已久的机械键盘拿出来,摆好姿势,通宵达旦地为用户大大们加好了直方图,并于上周四悄悄上线了,对,我们就是这么低调。然而,很多大大们表示,直方图还是柱状图?傻傻分不清。小编深感这年头光有图怕是不行了,必须得有个教程,要做到图文并茂。下面小编就从直方图是什么,为什么要用直方图,以及如何使用[ECharts](http://echarts.baidu.com/index.html)制作直方图三个方面,为各位大大们上点干货。

新版本 扩展 教程