自定义图表与仪表盘

效果图

image-20210104234738922

image-20210104234851799

image-20210104234624607

一. 自定义图表

菜单路径: 表单管理/仪表盘/图表列表

image-20210104235025490

新增图表

字段含义:

​ 名称 :

​ 编码 :

​ 数据来源 :

1. 数据来源 - 自定义chart:

​ 支持输入自定义的echartJs脚本 可参考系统demo中 自定义图表XXXX相关的图表

比如: 

var data = [];
for (var i = 0; i <= 360; i++) {
    var t = i / 180 * Math.PI;
    var r = Math.sin(2 * t) * Math.cos(2 * t);
    data.push([r, i]);
}
option = {
    title: {
        text: '极坐标双数值轴'
    },
    legend: {
        data: ['line']
    },
    polar: {
        center: ['50%', '54%']
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    angleAxis: {
        type: 'value',
        startAngle: 0
    },
    radiusAxis: {
        min: 0
    },
    series: [{
        coordinateSystem: 'polar',
        name: 'line',
        type: 'line',
        showSymbol: false,
        data: data
    }],
    animationDuration: 1000
};
return option;

自定义chart-效果如下:

image-20210104235506291

2. 数据来源 - 自定义列表:

2.1 选择某一个自定义列表为数据来源

image-20210104235925256

2.2 选择图表类型 (支持 区域图/柱状图/漏斗图/数据列表/仪表盘/折线图/指标卡/饼图/自定义等)

2.2.1 区域图

数据设置

​ X轴字段 : 指定一个

​ Y轴字段 : 可指定多个

image-20210105000343509

展示设置

​ 主标题 副标题 颜色 是否显示图例 线条样式(step/line)

image-20210105000620193

标签设置

​ X轴标题 Y轴标题

image-20210105000656289

区域图-效果

image-20210105000854388

2.2.2 饼图

数据设置

​ 维度字段 数据字段

image-20210105001002651

展示设置

​ 主标题 副标题 颜色 是否显示图例 是否是环形图 是否是玫瑰图

最终效果如下

饼图-效果1 : 普通饼图

​ image-20210105001200188

饼图-效果2 : 环形饼图

​ image-20210105001234688

饼图-效果3 : 玫瑰饼图

image-20210105001255530

饼图-效果4 : 玫瑰环形饼图

image-20210105001309269

2.2.3 折线图 (配置和区域图一样)
折线图-效果如下

image-20210105001527405

2.2.4 漏斗图

​ 配置参数与饼图类似, 只是少了饼图特有的 玫瑰/环状 的选项

漏斗图-效果如下

image-20210105001805320

2.2.5 数据列表

​ 原理是将自定义列表当做iframe嵌入其中 所以无需配置额外参数

数据列表-效果如下

image-20210105002114426

2.2.6 仪表盘

​ 原理是将指标字段的第一个值展示到仪表图表中, 适用于单数据展示

​ 数据设置

​ 指标字段

​ image-20210105002211383

​ 展示设置 (同漏斗图)

仪表盘-效果如下

​ image-20210105002357737

2.2.7 指标卡

​ 数据设置

​ 指标字段 单位 字体大小(小/中/大)

image-20210105002538427

指标卡-效果如下

​ (这是配置到仪表盘中的效果)

​ image-20210105002713035

2.2.8 自定义

适用于比较复杂的图表, 当从自定义列表或者自定义对话框获取到数据之后 可以通过自定义的echartJs脚本来渲染图表

不同于数据来源是自定义Echart的是, 自定义Echart是没有动态数据来源的, 而这种是可以在js中通过data变量获取从自定义列表/自定义对话框中返回的数据的

可参考demo 自定义列表-自定义XXXX 相关的demo

自定义-效果如下

image-20210105002957015

2.2.9 柱状图

​ 配置参数和区域类似 只是多了个 是否横向展示 的特性属性

柱状图-效果如下-纵轴

image-20210105003341562

柱状图-效果如下-横轴

image-20210105003419249

3. 数据来源 - 自定义对话框:

配置项跟自定义列表一样

​ 不同的是 自定义对话框不支持 数据列表 类型的图表

4. 数据来源 - IFRAME:

原理是通过iframe 嵌入一个url地址

比如 

/form/formCustSql/view/formCustSqlView.html?code=formCustChartTest

效果如下

image-20210105004346298

二. 自定义仪表盘

仪表盘的原理就是将不同的自定义图表排版布局到一个页面

仪表盘-效果图 :

image-20210104234738922

image-20210104234851799

操作步骤:

1. 添加仪表盘

菜单路径: 表单管理/仪表盘/仪表盘列表

image-20210105004657008

2. 添加图表

image-20210105004819345

3. 布局

3.1 选中需要布局的图表

3.1.1 单击选中

​ 即点击某个图表即可选中, 再次点击时,则取消选中

​ 选中的图表效果如下(带有边框)

image-20210105005009317

3.1.2 全选/反选/取消选择

通过快捷按钮,可以快速选中相关的图表

image-20210105005054378

3.2 上下左右键

上 : 高度减少

下 : 高度增加

左 : 宽度减少

右 : 宽度增加

TIP : 变化的都是被选中的图表

3.3 统一宽高设置

输入宽高后, 被选中的图表会统一设置为该宽高

image-20210105005500986

3.3.1 快速设置宽高

image-20210105005802419

3.4 占比设置

每一行分为12格, 可以通过占比设置快速分配每一个图表所占的格子数

image-20210105005626509

3.5 间距设置

默认每个图表的上间距和左间距是20px, 可以通过设置全局间距来控制

image-20210105005935996

3.6 是否按百分比

3.6.1 按百分比

​ 仪表盘会跟随浏览器大小而自适应, 否则图表就不会自适应

效果如下 : 缩小了浏览器大小

image-20210105010247287

3.7 是否换行

选中某个图表 选择换行 效果如下

image-20210105010549188

3.8 复制粘贴格式

复制某个图表的格式,可以粘贴到其他图表

image-20210105010725073

4. 保存

输入名称和别名即可

image-20210105010856266

5. 列表中的其他按钮

5.1 编辑

​ 可修改已保存的仪表盘

5.2 复制

​ 可快速复制一份仪表盘

5.3 预览

​ 可预览仪表盘的最终效果

image-20210105010933839

5.4 加入菜单

可快速加入系统菜单

image-20210105011206650

####