从ui图到开发页面该有的考虑

前言

开发经验满满的前辈们，此篇文章或许对大家来说并不值得一提，这里说的主要面向对象是小白，或者欠缺点经验的开发者们（懂echarts的更佳）。这里聊得是引导你们如何去思考一个问题，以我所在项目为例子，阐述个人思考方式和思路，也许对于某些人来说，能给予一些启发。这里说的没有对与错之分，我说的也未必都是正解，纯粹地一个我的总结和分享，我也是一个小小白。若有错误请多见谅，不喜勿喷！

例子

以这界面中红框部分为例子，用echarts实现，图形都是比较基础的饼图和柱状图。想必你们都以为这个很好实现吧。假设你知道echart的这两种图的基本配置项，你们的第一感受是否是以为，这个so easy？

假设你的老板叫你评估个时间作出来，可能你会凭感受地脱口而出，1-2个小时吧，甚至更短？

若是我在这里加个提醒，叫你们尽量去考虑全面再去回答老板的问题，是否，直到这里，你跟刚刚的想法发生了较大的变化？

---

这是分界线，在这以前，你们仍是能够好好考虑全面一下，跟接下来，我要说的，对比一下

总体布局

咱们知道，这里是有两个echart图，能够当作两个div，放在一行，能够用

div {
    display: inline-block;
    width: 50%;
}
/** or **/
div {
    float: left;
    width: 50%;
}
复制代码

来实现，想必各位第一反应也是这两个吧，反正我是的。

进一步去想，屏幕会变大缩小，若是缩小到很小的话，相比二者挤不下一行了，这时就要换行。那么，可能用flex布局，更加方便，都不用本身写媒体查询就能够智能的实现了。
然而，等到你真正去写的时候，会发现，布局乱糟糟，达不到预期，为什么？
缘由在echart图形自己的布局上，因为本来让echart正常展现的功能，会存在position等布局css样式，咱们都知道，使用flex布局，其子元素的一些布局样式会失效。 所以，这种方案不可行。 很遗憾，咱们仍是经过媒体查询去处理这种状况吧。

接下来，在图中看到

虽然说这是两个div，可是其实并无紧挨在一块儿的，从美观上讲，的确，须要用空白的间隔会更好看。那么怎么处理这个空白间隔呢？ 想必你们都以为这个有什么好讲的，搞个margin或者padding不就行了嘛，emmm...我一开始也是这么想的，可是准备写代码的时候，就会以为好麻烦（- _ - 我懒）：

1. 为第一个div设置个margin-left？那区别对待吧，加个类名，而后设置css。
2. 两个div的宽度和margin值计算好分配好空间占比
3. 那么小屏幕换行的时候，就会多了个margin-left了，那媒体查询处理掉吧

思路很清晰，实现起来也是很是简单的。可是，我后来仍是放弃了，
第一我以为，少点类名，代码更漂亮；
第二，我以为起名字好烦啊，用伪类？能够啊，可是也要处理好可否真的定位好这个，撇去自己项目的代码的一个总体环境，其实也是很简单的，可是当置于一个复杂的代码环境里，各类命名错综复杂的状况下，少用伪类仍是较为保险；
第三，我不想计算；
第四，关键的关键是，我以为存在更好的办法。

更好的办法（仍是要类名，可是项目里我是统一了两个类名）

/** 这两个类名估计你们都很熟悉，可是我项目没有引用boostrap，这是我本身定义的全局类名 **/
.pull-left {
    float: left!important;
}
.pull-right {
    float: right!important;
}
复制代码

回到这个图里，我为第一个div设置了pull-left类名，第二个div设置了pull-right类名。
可是他们的宽度再也不是width: 50%了，改为更小的值，以便留出须要的空白空间。（固然，有些人可能一开始就想到用这个布局了，这里只是在引导一个思考方式，最终造成一个好的思路而已）

图形的特殊状况

开发者们都深有体会，要实现一个ui图上的页面不难，难就难在，存在多种状况，多种未知因素，进而致使的个别特殊状况或极端状况。若是说，开发时间为100%，那么还原ui图的状况（正常的状况），占据了70%时间，30%就花在处理这些极端状况上了。内心面就以为很愤懑不平，明明这些特殊状况和极端状况出现几率那么小，缺花费了那么多时间去搞，甚至把代码都搞得更复杂，维护也很差。可是，这就是现实，没办法了，咱们能作的就是，在开始coding前，尽可能全面考虑，从中制定方案，避免开发到一半发现写不下去更换方案这就尴尬了。

废话很少说，这里会有什么特殊状况呢？以饼图为例子。

情景一

说一下大体背景需求，这里的饼图有多少组数据不是固定的，什么意思，图上不是有六组数据嘛（红书发布、搜狗搜索...），就是图上六中颜色的数据嘛。这些数据个数，都是未知的，可能不少可能不多。

了解基础背景后，你们有什么想法。

因为这些数据个数都是未知的，所以咱们要考虑好两个极端的状况，很是少数据的状况（也就是1组数据），一个是不少数据（无穷）。 会对图形有什么影响？变如今？

数据的多少，会表如今图例上，要考虑哪些问题呢（渐进式思考）？

1. 不论图例多少，总体图例的位置都要垂直居中于饼图，所以legend的top值，不能是其余数值，只能是'middle'，那么数据不少的时候，是否会自动继续往下堆叠，仍然保持垂直居中呢？
2. 包含echart的图的container，必定要设置宽度和高度才能呈现出图，所以，不能实现高度随着图例的变多而变高，所以光设置个middle仍不足。通常状况下，既然设置了高度了，若是图例数目往下排列的时候到达高度的极限，会自动新增第二列。可是在这里，因为一行存在两个div，并且宽也设定了，明显让其自由这么发展下去，只会有一部分图例被遮挡住了。
3. 很遗憾，面对这种问题，虽然ui图上没有考虑到多图例的状况，产品经理也可能没考虑到，那么或许咱们须要本身决定改造一下了（最好咨询一下产品吧），反正就是，咱们要有这个极端意识。解决办法就是，利用echarts提供的图例分页功能了。相似这种

情景二

上面也说了，有多少组数据都是未知，那么这些数据的名称（小红书发布这些...）也是未知的，天然这些名称长度也是未知的。那么问题就来了，若是名字很长怎么办？
思路：

1. echarts的图例很长的时候，不会自动换行的，固然选择了canvas生成的图，更加不可能经过样式改变了。而咱们这里，若是名称很长了，会超出到屏幕外面，很差！
2. ui图也没告诉你这种状况下该怎么办？可是，咱们必定要有这个意识（重复了不少遍了，我本身都嫌本身），能怎么办？截断呗。至于截断的方式，能够用字符串的阶段，也能够用echart自带的一个方法截断（本身去查，印象才更深）

3. 是否是截断了就没事了？错，图例的水平位置就要考虑好了，若是仍是以ui图那些图例状况来考虑水平位置的放置的话，可能真遇到须要截断的状况下，水平位置放得很差的话，就会出现就算你截断了，可是仍是显示不出来，直接被父层的元素给砍掉了内容。
4. 所以，要结合屏幕的状况，考虑好截断多少，而后以这种截断后的状况来调整图例的水平位置，这样才能避免上述问题。 既然截断了，用户也就不知道真正的名字了，那么咱们天然也要须要为截断的图例提供tooltip，用echart的图例tooltip功能就行了

三） 既然数据的名称会有很长的状况，那么天然而然，对应的tooltip上的名称，也会很长。 这里的tooltip有两种，一种是悬浮在饼图上的tooltip，一个是悬浮在图例上的tooltip

不论哪一种tooltip，存在的问题性质上是同样的。

1. 如图，若是名称像红框那么长，那么tooltip也会这么长，若是不幸tooltip的层级不够高，还有可能被别的元素遮挡住了。
2. 对于图例的tooltip，名称必定要展现彻底的，否则都省略了，这个tooltip就没啥意义了。可是也不能让它那么长，咋办？那就让他自动换行呗。至于自动换行的方法，我不知道能不能设置这个tooltip的宽度，若是能够的话，能够设置宽度，然里面的文字自动换行就行了。若是不行，那就截断字符串，用'\n'链接再展现出来就能够了（我是用这种）。
3. 对于悬浮在饼图上展现的tooltip，一样用上述的换行方式也能够，也能够用截断的方式，反正都有图例说明了，可是仍是换行好点吧，具体问本身的产品经理吧。
4. 那么问题就来了，到多宽才进行换行/截断呢？先看个失败的例子：
5. 截断的宽度把握很差，就会仍是存在被强制遮盖的状况。所以，具体要多宽，本身要综合页面上的各类状况来好好斟酌了，多测试。

最后

大概要想说的就这么点了，其实真要处理起来，细节的东西仍是不少的，不过我也很少说了。但愿你们之后在拿到ui图拿到需求后，不要过于着急立刻进行开发，仍是先理解好需求，考虑好各类状况下，在进行编码。此篇文章或许对你思考起到那么丁点做用，这样我也感到开心。 祝各位开发者愈来愈厉害~~~