-
-
yangqh 数据老手Lv5
发表于2019-12-6 18:10
楼主
本帖最后由 yangqh 于 2019-12-6 18:12 编辑
你还在为报表分析中缺少想要的统计图的类型而烦恼吗？你还在为统计图中缺少某些属性设置而犯难吗？
噔噔噔噔~~今天想跟大家分享一个ABI报表分析中特别实用的功能-》自定义echarts组件 功能入口：
以调用echarts实现水球图为例，操作步骤如下：
Step1：将需要使用到的echarts脚本文件上传到资源管理器中
下载请戳-》
echarts_liquidfill.zip
(38.85 KB, 下载次数: )
Step2：自定义echarts组件脚本中，用EUI.include调用上传的这个js脚本文件
复制代码
Step3：自定义echarts组件脚本中，定义统计图的option，例如下：
复制代码
关于水球图，更多样例详询echarts官网：https://github.com/ecomfe/echarts-liquidfill
最终效果：
你还在为报表分析中缺少想要的统计图的类型而烦恼吗？你还在为统计图中缺少某些属性设置而犯难吗？
噔噔噔噔~~今天想跟大家分享一个ABI报表分析中特别实用的功能-》自定义echarts组件 功能入口：
以调用echarts实现水球图为例，操作步骤如下：
Step1：将需要使用到的echarts脚本文件上传到资源管理器中
下载请戳-》
echarts_liquidfill.zip
(38.85 KB, 下载次数: )
Step2：自定义echarts组件脚本中，用EUI.include调用上传的这个js脚本文件
- EUI.include("vfs/root/products/ebi/sys/echarts_liquidfill.js");
Step3：自定义echarts组件脚本中，定义统计图的option，例如下：
- var value = 0.48;
- var data = [value, value, value, value, value, ];
- var option = {
- backgroundColor: '#fff',
- graphic: [{
- type: 'group',
- left: 'center',
- bottom: 10,
- children: [{
- type: 'text',
- z: 100,
- left: '10',
- top: 'middle',
- style: {
- fill: '#000',
- text: '磁盘剩余空间：',
- font: '16px Microsoft YaHei'
- }
- }, {
- type: 'text',
- z: 100,
- left: '120',
- top: 'middle',
- style: {
- fill: '#000',
- text: '128G',
- font: '24px Microsoft YaHei'
- }
- }]
- }],
- series: [{
- type: 'liquidFill',
- radius: '70%',
- center: ['50%', '40%'],
- data: data,
- backgroundStyle: {
- borderWidth: 5,
- borderColor: '#1daaeb',
- color: '#fff'
- },
- label: {
- normal: {
- formatter: (value * 100).toFixed(2) + '%',
- textStyle: {
- fontSize: 20
- }
- }
- }
- }]
- };
- return option;
关于水球图，更多样例详询echarts官网：https://github.com/ecomfe/echarts-liquidfill
最终效果：
