D3 v4.x 的echarts化(2-2)—— 柱状图拓展groupBar

D3 v4.x 的echarts化(2-2)—— 柱状图拓展groupBar_第1张图片

  echarts的演示地址http://echarts.baidu.com/examples/editor.html?c=bar-label-rotation

  项目的gitHub地址https://github.com/dkr380205984/myComponent/tree/master/src/page/d3

  在普通柱状图的基础上,进行了一部分的拓展,包括图例(legend)的加入,以及提示信息(toolTips)的完善,当然最明显的区别就是本例可以实现多个数据的柱状图展示。

  目前不完善的部分是鼠标点击图例的交互部分,关于这部分交互内容想留到下一阶段做组件封装的时候进行,如果有需要的话可以参考注释内容,你可以在点击事件中自己写回调函数以触发视图更新。柱状图的拓展就只做这一个,还有横向的柱状图等等的,个人觉得无关紧要的部分有时间在做,毕竟空余的时间也没那么多,没法当作事业去做,一个人的力量是有限的,感兴趣的童鞋可以跟我一起探讨和开发,QQ:380205984

  由于绘制图形的详细步骤已经在上一章,普通柱状图,进行说明了,如果结合上一章内容和注释有看不懂的地方可以留言,源码如下,复制粘贴即可。






 

你可能感兴趣的:(D3,V4.x版本)