如何自定义echars统计图

3007
0

辰哥 管理员

发表于2019-10-8 16:58

楼主
有这样一需求:要在用“ABI统计图组件”做的图形上显示3个Y轴,同时添加一个系列(库存消费比)来对应第三条Y轴,如下图所示。

11.png
如果我们使用ABI统计图组件,系列的添加很容易;但是呢,对于Y轴,最多只能做到显示左右两个,对于第三条Y轴的添加就无能为力了。面对这种情况,不必苦恼,只需要将统计图组件换成EChart组件,就可以简单并且完美的解决这一问题。

什么是EChart组件?

简单通俗的讲,EChart组件可以看作是ABI提供给echarts插件的一个接口。通过EChart组件,我们能够非常轻易的拿到统计图的json对象,方便对图形json对象的属性进行增删改查等操作,实现客户提出的传统统计图组件不能或是不能轻易实现的效果。

如何使用EChart组件(条件:具备js相关的知识储备)
EChart组件按照使用方式的不同主要分为两大类:普通echarts统计图(柱状图,线状图,饼图,仪表盘,条形图)和自定义echart统计图。

普通echarts统计图
第一步,拖一个EChart组件(柱状图为例)到编辑面板区,接下来的操作和传统统计图组件的使用方式,给统计图绑定系列,指标以及数据;
如果只是针对传统统计图能够实现的需求的话,到这里就结束了;但是,回到最初客户提出的需求,显然就不能满足了,我们需要继续下面的操作。
第二步:选中拖入的EChart统计图,在右侧的属性列表中点击“计算后”属性,弹出下图所示的窗口(脚本中已经对echart统计图的使用做了简要的说明);
22.png
分析上面客户的需求,我们需要添加一条Y轴和一个系列(如下图),定义一个y轴addy和一个系列series1,分别添加到datajson(第三方json)的对应位置;这样就满足了客户的需求。
33.png

具体的各类属性设置需要参考echarts官网的配置项手册(https://www.echartsjs.com/option.html)。

自定义echart统计图

第一步:拖一个自定义的EChart统计图到编辑区,双击统计图(或同普通类方式)打开计算后脚本。
44.png
第二步:如上图所示,定义一个变量option(datajson对象),给它添加一些属性,对于常见的统计图(柱状图,线状图等),至少需要添加3个基础属性X轴(xAxis),Y轴(yAxis)和系列(series),最后再返回option。计算后效果如下

55.png
使用自定义echarts统计图,我们几乎可以实现echarts官网上所有实例的效果,如果再想添加各种复杂酷炫的效果,参考echarts官网的属性配置手册(https://www.echartsjs.com/option.html)进行设置即可。(注意:echarts官网中的echarts对象我们需要改成echartsesen)

怎么样,了解了ABI中echart组件的强大之处,有没有献上你的膝盖呢,嘿嘿!



最近看过此主题的会员

esen_4PB1SMQ6J3

DJY

xzm

0个回答

只看楼主

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号