-
-
辰哥 管理员
发表于2019-10-8 16:58
楼主
有这样一需求：要在用“ABI统计图组件”做的图形上显示3个Y轴，同时添加一个系列（库存消费比）来对应第三条Y轴，如下图所示。
如果我们使用ABI统计图组件，系列的添加很容易；但是呢，对于Y轴，最多只能做到显示左右两个，对于第三条Y轴的添加就无能为力了。面对这种情况，不必苦恼，只需要将统计图组件换成EChart组件，就可以简单并且完美的解决这一问题。
什么是EChart组件？
简单通俗的讲，EChart组件可以看作是ABI提供给echarts插件的一个接口。通过EChart组件，我们能够非常轻易的拿到统计图的json对象，方便对图形json对象的属性进行增删改查等操作，实现客户提出的传统统计图组件不能或是不能轻易实现的效果。
如何使用EChart组件(条件：具备js相关的知识储备)？
EChart组件按照使用方式的不同主要分为两大类：普通echarts统计图（柱状图，线状图，饼图，仪表盘，条形图）和自定义echart统计图。
普通echarts统计图：
第一步，拖一个EChart组件（柱状图为例）到编辑面板区，接下来的操作和传统统计图组件的使用方式，给统计图绑定系列，指标以及数据；
如果只是针对传统统计图能够实现的需求的话，到这里就结束了；但是，回到最初客户提出的需求，显然就不能满足了，我们需要继续下面的操作。
第二步：选中拖入的EChart统计图，在右侧的属性列表中点击“计算后”属性，弹出下图所示的窗口（脚本中已经对echart统计图的使用做了简要的说明）；
分析上面客户的需求，我们需要添加一条Y轴和一个系列（如下图），定义一个y轴addy和一个系列series1，分别添加到datajson（第三方json）的对应位置；这样就满足了客户的需求。
具体的各类属性设置需要参考echarts官网的配置项手册（https://www.echartsjs.com/option.html）。
自定义echart统计图：
第一步：拖一个自定义的EChart统计图到编辑区，双击统计图（或同普通类方式）打开计算后脚本。
第二步：如上图所示，定义一个变量option(datajson对象)，给它添加一些属性，对于常见的统计图（柱状图，线状图等），至少需要添加3个基础属性X轴（xAxis），Y轴（yAxis）和系列（series），最后再返回option。计算后效果如下
使用自定义echarts统计图，我们几乎可以实现echarts官网上所有实例的效果，如果再想添加各种复杂酷炫的效果，参考echarts官网的属性配置手册（https://www.echartsjs.com/option.html）进行设置即可。（注意：echarts官网中的echarts对象我们需要改成echartsesen）
怎么样，了解了ABI中echart组件的强大之处，有没有献上你的膝盖呢，嘿嘿！
