如何基于 echarts 在柱状图或条形图上实现转换率？（有想法

2020-05-31 本文已影响0人零之彼岸

我是没想法啦（一开始）。其实，好久没接触 echarts 了，至少有一年多了，想起以前折腾地图的情景了🙃。

需求

两张图。没有再多了...

柱状图：

need-v.png

条形图：

need-h.png

探索一

俗话说，不知道怎么办的时候，百度来帮忙。百度一下。

输入关键字：echarts 柱状图转换率

baidu-search-res.png

打开第一篇的结果：echarts实现漏斗转化率图表效果

文章描述的就是我想要的✌️。用的 series 中的markpoint 来实现。

找到思路了，找到 echarts 官网相关文档：series-bar.markPoint

看遍并动手操作了，结果是不能解决需求。原因如下：

图形（箭头）：默认提供的没有满足的。[symbol]
图形（箭头）位置：无法设置在两根柱子的中间，且距离轴固定距离。提供的可调整位置的参数都是针对当前柱子而言相对或绝对的距离。[symbolOffset 等位置参数]
图形（箭头）百分比：如何拿到参数计算两根柱子直接的百分比。

一开始就被难倒了呢。不放弃，💪。

经过以上，对 markPoint 有了解了，并且也对需求要实现的点更清楚了。

百度/谷歌的结果，仅此一种思路。

探索二

那么如何解决呢，找类似案例，寻找思路。案例在哪呢？官网案例上没有类似的呢。

其实有个 echarts 的案例宝库：gallery，上面有非常丰富且有创意的案例。

寻找中...

可借鉴案例(最终用到的，其实还看了更多呢):

case1: 工作地top10，借鉴地方：条形图，右侧圆，更改形状、位置等

case1.png

case2: 温度计柱状图，借鉴地方：柱状图，底部圆，更改形状、位置等

case2.png

case3: 立体柱状图，借鉴地方：柱状图，目标值，柱子中间问题解决了，只需改形状

case3.png

case4: 柱形图排名，借鉴地方：没看到可借鉴地方，猜想可能有用就留着了，后面其实帮大忙了

case4.png

探索三

案例收集好了，那么开始吧，通过观察案例，寻找思路，探索可行性，并进行实践。

转换实践思路1

case1, cas2 是实现思路是一样的，只是方向不一样。都是基于 series，用其中一项作为圆，type: scatter，通过改变相关属性来实现的。

由于之前看到 symbol 支持三角形，想到个思路，箭头可以用三角形和矩形绘制而成。

transform1.png

transform2.png

看了结果，是不是很接近需求了，可以采用了。

答案是否定的。

失败案例：

因素：增加了数据项

transform-fail1.png

transform-fail2.png

因为位置是相对柱子而言的，并不能准确的保证在柱子中间。可能改的位置不对😑

因素：更改了数据项的值

transform-fail11.png

因为比例有大小，而值会根据坐标轴定位

只能放弃了。

转换实践思路2

case3 是用 series 的标注线实现的。

transform3.png

堪称很完美了，还有动画呢。

至于形状，之前看文档 backgroundColor 属性，可以用背景图。

是不是很接近需求了，可以采用了。

答案依旧是否定的。

失败案例：

因素：增加了数据项

transform-fail3.png

因为每条标注线只能有一个 label 值。其实如果数据项只有两项，这样实现还是可以的呢。

其他思路

case 4 还没看呢。简单看看吧，说不定有发现。

transform4.png

结果真有发现呢，值是不同的，但是图形距离轴的距离是相等的，可借鉴呢。

探索四（揭晓答案）

找不到答案的时候，不妨回到起点看看，也许会有发现。

经过以上探索，虽然没有结果，但是探索过程，也是很有帮助的。

以上案例，都是通过 series 多选实现的，其中一项用来显示柱状图，其他项用来绘制其他图形。那么我也可以这样做，用两根柱子表示一个维度，一个显示柱子，另一个显示转换率。

至于位置，case4 也有了思路，至于答案，也近了。

至于图形，case3 也有了思路，至于答案，也近了。

那么动手吧。

bar-v.png

bar-h.png

更改数据项长度或值大小，相比于前面都能正常显示，可以说 90% 了（毕竟没有完美的）。

bar-h1.png

bar-v1.png

至于如何再完美一些呢，举例：

如果数据项特别多，可以考虑用条形图，动态计算根据数据项的多少调整容器的高度，内滚动，外固定，不打破页面布局。

答案篇说明

backgroundColor 用法

通常用法：

backgroundColor: 'red' // css 颜色值

其他用法：

backgroundColor: {
  image: 'xxx/xxx.png'
  // 这里可以是图片的 URL，
  // 或者图片的 dataURI，
  // 或者 HTMLImageElement 对象，
  // 或者 HTMLCanvasElement 对象。
}

怎么用 HTMLImageElement 对象

backgroundColor: {
  image: image: document.getElementById('arrow-h') // html上的元素<img src="" id="arrow-h" />
}

我最终实现时是采用的方案：

backgroundColor: {
  image: './arrow.svg',
}

关于箭头的 svg , 我一开始是到 iconfont 图标库找，结果没找到🙁

后来是自己实现的。（果然是自己动手，丰衣足食呢，😬）

双柱合一

保证显示的柱子中间始终和轴的文字对齐。series 的另一项（非显示的那根柱子）

barGap: '-100%',

始终在轴的中间

不固定柱子宽度，而是根据百分比箭头占的空间，固定柱子之间的间距（显示的那根柱子的 series 配置）

barCategoryGap: 40,

百分在变，但是距离轴的距离固定

外层数据固定值0（不显示柱子哦 😯），内层数据显示百分比

let rateData = arrPercent(data); // arrPercent 根据显示的柱子的数据，计算百分比
let rate = rateData.map((v, i) => {
  let item = {
    value: 0, // 外层
    label: {
      formatter: '{a|' + v + '%}', // 显示的百分比呢
    }
  }
  return item
})

一切问题迎刃而解，给自己鼓个掌👏

源码

实践代码哦 😯

github

最后

有更好思路或想法的，请联系我，非常欢迎找我探讨（渴望 ideal 似渴望 ✨🌜）。