从技术架构视角解析衡石可视化产品的灵活性与用户体验优化

标准产品的取舍

做标准产品易用性和灵活度是一个值得讨论的话题，易用性往往是更明确入口、更简单的交互，但场景也会比较固定；灵活度是能够满足更多更个性化的需求，但易用性上往往会受到影响。

衡石产品易用性

举个例子，我们想看公司按地区和订单日期的销售额，在衡石中只需要选择分组堆叠柱状图，然后分别拖入三个字段就可以看到了，如图：

通过三次拖拽就能出图，这是易用性的体现。这个时候如果我们想更改图元的颜色，就可以到样式中去修改，如图：

这里我们看到，样式中存在很多配置，满足了我们针对于这一类型图的常规配置，但这里我们需要警惕，如果为了满足各种场景这里无限制的增加配置，易用性是会被大大影响的，从产品的角度我们需要限定范围，哪些是高频的、通用的配置，才能够放到这里。

衡石产品灵活度

针对上图，我们从产品上限制了颜色由次维度主导，那我们如果想要用颜色的深浅来衡量销售额的多少怎么办呢？答案是在这个图上是做不到的，不过我们有一个灵活度更高的图，那就是组合图表。组合图表是基于一套使用数据来描述图元信息的可视化逻辑，致敬Tableau。如图：

地区是主维度，控制了 x 轴的显示内容，销售额控制了 y 轴的显示和值的范围，并且销售额控制了颜色，这个时候图元就是按照销售额的大小来显示对应的颜色，订单日期在次维度中切分数据。这里通过变化数据控制图元属性能够都不同的展现形式，灵活度很高，但是易用性上就有一些门槛了，具体的细节可以参考 

将灵活做到极致

如果还想做一些更灵活的图怎么办？想做一个 3D 的地球？想做一个动态排行榜？答案是可以通过自定义图表来实现，自定义图表提供了可以使用 JS 的能力，编写的JS 将会在沙盒中运行，目前内置了D3、Echarts、EchartsGL、Three.js，如果不满足于这些，还可以通过全局JS的方式加载其他的插件，可以按照需求实现各种可视化效果。简单截几个图：

敬请期待新模版

这里可以做的东西更多，但门槛也更高，为了降低这个使用门槛，我们正计划开发模板平台，让大家可以寻找和分享创建的自定义图表，详细的使用可以参考 https://docs.hengshi.com/v5.3/custom-charts.htm

易用性 or 灵活度？我们都要！

总的来说，做标准产品平衡易用性和灵活度是一个挑战，衡石在针对数据可视化上，通过预置图表来提高高频图表的易用性，通过组合图表来完成一些个性化的数据展示，通过自定义图表来让完成一些更复杂的需求。