前端可视化包含哪些内容，前端可配置的可视化是什么一种什么概念？

Question

大四毕业生，毕业之后装正在之前实习的公司，部门总监给了一个任务叫我写一个可配置的可视化react组件，但是这个可配置的理解是什么，不是很理解，我目前是打算利用Three.js作为核心，来做一个类似于echarts那样的配置类型的react组件，不过我还是感到迷茫，最近几天写代码都是写了删，删了写，对于可配置的理解还不是很明确。

Answer 1

简单一点说吧，可视化最常见的媒介就是图形图表，无论是基于 canvas（比如 echart）还是 svg（比如 d3）或是 WebGL（比如 Three.js），创建图表最主要的工作就是传递合适的数据和参数。牵扯到 React，那自然是说要把各种图表类型封装成组件来使用了，而组件都是状态驱动的，也就是说传递的状态变化可以让组件重新渲染，在视觉上的表现就是所谓的“实时更新”。于是，“可配置”的意思无非就是数据和参数不能写死在组件里，而是能够合理的设计组件让这些东西通过参数传递的方式来渲染这些图表组件。所要打到的效果就是组件内部的实现（图表的组装和渲染过程）是隐藏的，而决定组件具体呈现的数据是可以通过参数传递的，从而达到更高的扩展性、维护性、可读性、可重用性等等。照这个思路去做就不会有问题了，不过中间要处理的细节会很多，也很考验设计能力（我指的是代码和接口设计），先从最简单的做起吧，比如说绘制一个最基本的 Bar/Column 图，基本的属性，诸如 series data, x/y axis, label, unit, scale, legend 等等都可以通过参数传递，并且当参数变化的时候组件可以自动更新之类的。