-
橙子 小试身手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, 下载次数: )
去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);
-
小时
全天响应
-
分钟
快速处理问题
-
工程师强势助力
- 明星产品
- 解决方案
- 联系合作
-
渠道咨询电话:137-0120-6790
技术支持QQ:400-0011-866(工作日9:00-18:00)
产品建议邮箱yixin@esensoft.com
- 关注我们
-
扫TA学习更多干货
一对一专家交流
版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号