Bizcharts 之不常用API学习记录

1前言      

      日常开发过程中，使用bizcharts组件时，习惯了从官网复制代码，改改直接放入项目中或者将组件需要的数据以参数的形式传入到组件， 一旦遇到官网没有的组件类型（一般是组合形式）或者是官网没有的组件样式（目前遇到的是坐标轴标题），立马就慌了，问问周围同事，大家说说没用，然后费尽口舌告诉产品或者设计实现不了！渐渐的一切变得理所应当了，而自己也变得自以为是，原来Bizcharts这么简单好用呀。直到某一天，在项目中看到了不同的想法时，忙去看官网API，惊叹，原来可以这样，原来还可以这样！原来有的时候不是产品无知，而是自己太自以为是了。嗯！记录一下，希望自己以后不再人云亦云，一切都在研究后再给出结论。

2所谓不正常的需求以及不常用API

2.1那些年，那些被误解的需求

混合图表：分组柱状图+面积图

     某天产品出了个原型图，看第一眼，这不是柱状图+面积图吗，可以实现的，感觉没问题。于是，答应下来，去官网找类似图表，竟然没有。没关系，不就是两个图的叠加吗？再加个<Geom/>就是了（灵感来源于折线图，既有"line"，又有“point”），结果发现①、面积图和这桩图起点终点不一致，可以调整，但结果是要么面积图能看，要么柱状图能看；②、tooltip出现了两份；③、数据源的问题无法解决。和同事商量后，告诉产品，无法实现……end。

     最近看官网API，发现原来官网早就考虑到这个需求了:View(https://bizcharts.net/product/bizcharts/category/7/page/33)

坐标轴的标题位置

     跟着原型开发出来了，UI效果图也出来了，好吧！令人眼花缭乱的颜色也就算了，可以坐标轴标题是怎么回事？横坐标标题和数据一致，纵坐标标题也是如此。懒得研究了，和其他前端同事讨论，得出结论，坐标轴区域怎么放标题呀！于是，立马否定了，同事告诉UI小姐姐，以后图表的的坐标轴标题应该放在哪里哪里（其实就是官网图表默认的）。项目紧急，开会时，老大发话，以后图表都用组件默认的样式，ok，万事大吉。

    然鹅，意外总比办法多，UI小姐姐们根本不按照套路出牌，有的是横坐标有标题，有的是纵坐标有标题，有的是横坐标和纵坐标都有标题，还是放在坐标轴内的，而负责人也是睁一只眼闭一只眼，实现还是要实现的，和其他同事讨论，纵坐标的问题倒是可以解决，但是需要设置纵坐标的label不能旋转，有弊端……新的解决方案：<Guide.Text/>(https://bizcharts.net/product/bizcharts/category/7/page/31)

折线图中标注出部分数据（比如体现集中分布）

    有一个需求：折线图展示学生的考试分数，中间出现一个类似于面积的覆盖层，表示集中分布的分数。原型一出来，第一眼，怎么这么眼熟，怎么这么眼熟，再看一眼，有点类似于数学中正态分布的意思，可是转眼一想，使用代码怎么实现，瞬间傻眼了，和其他同事商量，最终结论：做不了。

    直到那天，直到我看到了<Guide.Region/>

图表中出现一条固定的直线（比如全校平均分）

      按照学院或者专业展示学生的成绩时，要有一条直线，展示全校学生的平均成绩，这个需求听起来很酷，也没毛病，奈何，就是不知道怎么实现的！

      在官网找了好久的demo，最终在官网demo(https://bizcharts.net/product/bizcharts/demo/67)中获取灵感，解决了，但是现在回头看看，或许会有更好的处理方法。

横坐标文字过多时，固定显示X个字，鼠标悬浮展示全部

   不做过多解释，合情合理，却又无可奈何，使用过<Axis/>的format，也试过<Chart/>中scale的formatter,奈何，人家只接受字符串，最终，歪打正着使用了<Axis/>的htmlTemplate算是勉强解决，期待后续有新的方法。

2.2那些被遗忘的API

 View

官网链接：https://bizcharts.net/product/bizcharts/category/7/page/33

概念：视图，由 Chart 生成和管理，拥有自己独立的数据源、坐标系和图层，用于异构数据的可视化以及图表组合，一个 Chart 由一个或者多个视图 View 组成。因此 view 上的 api 同 chart 基本相同

功能：

• 在同一个容器中出现两个或者更多不同坐标系的图表时，可以采用View组件来实现
• 同一个容器中的两个图表需要采用不同的数据源时

父组件：

    <chart/>

子组件：

   <Goord/><Axis/><Geom/><Legend/><Tooltiip/><Guide/><Facet/><View>

个人理解：

1.     View组件可以实现不同坐标系图表，即一个图表中可以可以包含其他类似的图表，比如：分组折线图和面积图组合（数据源不同）
2.     使用时，