ABI-酷屏自定义组件(echarts)

7691
4

橙子 小试身手Lv3

发表于2019-7-31 11:23

楼主
需求:ABI酷屏自定义组件(echarts)。
去echarts官网(https://echarts.baidu.com/examples/editor.html?c=line-simple)找效果图,以基础的折线图为例,整体两个data分别代表x轴数据和y轴数据,还有一个lineStyle的color属性,可以通过改变它的值来控制折线颜色。

步骤:
1.在自定义组件或分组上右键,选择新建HTML组件。
2.去取数定义里设置我们需要的变量,就是指x轴(xdata)和y轴(ydata)对应的数据。
3. 去属性中添加一个color属性来控制折线颜色。colorText
4.开始写代码,default.js用来写js代码,default.css是样式文件,如果还需要别的文件,可以点击加号添加,js和css最多可以各添加5个,每个大小在100k以下。

5.
写js,定义两个全局变量来存放我们的折线图对象和折线颜色。 chart=null;var colorTest=null;
6.去初始化init方法里,用变量存放取数得到的变量。 var initdatax =eval(vardata.xdata); var initdatay =eval(vardata.ydata);  
7.判断是否引入文件,没有则引 if(!window["echarts4"]){EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/echarts.js");}
8.初始化chart对象。chart = echarts4.init(basedom); 自定义第三方echarts组件.pdf (390.93 KB, 下载次数: )

小时

全天响应

分钟

快速处理问题

工程师强势助力

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

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

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

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流