Question

使用echarts做对比图

Answer 1

最近的项目中用到了对比图，为了以后不再到处找资料，特记录下对比图的做法。

对比图实际上是一组横向的柱状图，以x轴为度量，y轴为维度，与echarts官方给出的示例不同的是，一般x轴左右侧都需要是正值。这样的话可以建立三个坐标系来实现：第一个坐标系对应左侧部分（x轴设置 inverse ），第二个坐标系对应右侧部分，两个坐标系均隐藏y轴，第三个坐标系用来显示y轴（y轴一般放在左侧，视情况也可以放右侧）同时隐藏x轴。如图所示

对比图中还加入了datazoom，将三个y轴联动起来。
最后有一个美中不足的地方，鼠标移入时tooltip暂时只能显示某一侧的内容，如果再增加坐标系或许能够解决...