Foming
3 years ago
committed by
Gitee
commit
322af591e1
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,56 @@
|
||||
package com.anjiplus.template.gaea.business.enums;
|
||||
|
||||
public enum SetTypeEnum {
|
||||
SQL("sql", "sql"),
|
||||
HTTP("http", "http"),
|
||||
;
|
||||
|
||||
private String codeValue;
|
||||
private String codeDesc;
|
||||
|
||||
private SetTypeEnum(String codeValue, String codeDesc) {
|
||||
this.codeValue = codeValue;
|
||||
this.codeDesc = codeDesc;
|
||||
}
|
||||
|
||||
public String getCodeValue() {
|
||||
return this.codeValue;
|
||||
}
|
||||
|
||||
public String getCodeDesc() {
|
||||
return this.codeDesc;
|
||||
}
|
||||
|
||||
//根据codeValue获取枚举
|
||||
public static SetTypeEnum parseFromCodeValue(String codeValue) {
|
||||
for (SetTypeEnum e : SetTypeEnum.values()) {
|
||||
if (e.codeValue == codeValue) {
|
||||
return e;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
//根据codeValue获取描述
|
||||
public static String getCodeDescByCodeBalue(String codeValue) {
|
||||
SetTypeEnum enumItem = parseFromCodeValue(codeValue);
|
||||
return enumItem == null ? "" : enumItem.getCodeDesc();
|
||||
}
|
||||
|
||||
//验证codeValue是否有效
|
||||
public static boolean validateCodeValue(String codeValue) {
|
||||
return parseFromCodeValue(codeValue) != null;
|
||||
}
|
||||
|
||||
//列出所有值字符串
|
||||
public static String getString() {
|
||||
StringBuffer buffer = new StringBuffer();
|
||||
for (SetTypeEnum e : SetTypeEnum.values()) {
|
||||
buffer.append(e.codeValue).append("--").append(e.getCodeDesc()).append(", ");
|
||||
}
|
||||
buffer.deleteCharAt(buffer.lastIndexOf(","));
|
||||
return buffer.toString().trim();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
use
|
||||
aj_report;
|
||||
|
||||
-- 增加字段
|
||||
ALTER TABLE `gaea_report_data_set` DROP COLUMN `set_type`;
|
||||
-- 将该字段值全更新为sql
|
||||
update gaea_report_data_set set set_type = 'sql';
|
||||
|
||||
-- 字典
|
||||
INSERT INTO `gaea_dict`(`id`, `dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default, '数据集类型', 'SET_TYPE', '数据集类型', 'admin', '2021-11-16 14:43:12', 'admin', '2021-11-16 14:43:12', 1);
|
||||
INSERT INTO `gaea_dict_item`(`id`, `dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default , 'SET_TYPE', 'sql', 'sql', NULL, 1, 'zh', NULL, NULL, 'admin', '2021-11-16 14:43:42', 'admin', '2021-11-16 14:43:42', 1);
|
||||
INSERT INTO `gaea_dict_item`(`id`, `dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default , 'SET_TYPE', 'http', 'http', NULL, 1, 'zh', NULL, NULL, 'admin', '2021-11-16 14:43:51', 'admin', '2021-11-16 14:43:51', 1);
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,445 @@
|
||||
/*
|
||||
* @Descripttion: 装饰饼图
|
||||
* @version:
|
||||
* @Author: foming
|
||||
* @Date:
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
*/
|
||||
export const widgetDecoratePie = {
|
||||
code: 'widgetDecoratePieChart',
|
||||
type: 'chart',
|
||||
label: '装饰饼图',
|
||||
icon: 'iconicon_tubiao_bingtu',
|
||||
options: {
|
||||
// 配置
|
||||
setup: [
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '图层名称',
|
||||
name: 'layerName',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '静态装饰饼图',
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '背景颜色',
|
||||
name: 'background',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
[
|
||||
{
|
||||
name: '最外环设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '显示',
|
||||
name: 'isLastRingShow',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '0%颜色',
|
||||
name: 'lastRing0Color',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#4FADFD'
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '100%颜色',
|
||||
name: 'lastRing100Color',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#28E8FA'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '八分环设置',
|
||||
list: [
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '颜色',
|
||||
name: 'eightColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#4FADFD'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '虚线环设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '虚线数量',
|
||||
name: 'dottedNum',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 40
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '颜色',
|
||||
name: 'dottedColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#28E8FA'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '三分环设置',
|
||||
list: [
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '一段颜色',
|
||||
name: 'three1Color',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fc8d89'
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '二段颜色',
|
||||
name: 'three2Color',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#46d3f3'
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '三段颜色',
|
||||
name: 'three3Color',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 'rgba(203,203,203,.2)'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '外指标环设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '环显示',
|
||||
name: 'isOutRingShow',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '环颜色',
|
||||
name: 'outRingColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '环宽度',
|
||||
name: 'outRingWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '指标线显示',
|
||||
name: 'isOutSplitShow',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '指标线数量',
|
||||
name: 'outSplitNum',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '指标线长度',
|
||||
name: 'outSplitLength',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 32
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '指标线宽度',
|
||||
name: 'outSplitWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '指标线颜色',
|
||||
name: 'outSplitColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '刻度线显示',
|
||||
name: 'isOutTickShow',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刻度线数量',
|
||||
name: 'outTickNum',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刻度线长度',
|
||||
name: 'outTickLength',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刻度线宽度',
|
||||
name: 'outTickWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '刻度线颜色',
|
||||
name: 'outTickColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '里指标环设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '环显示',
|
||||
name: 'isInRingShow',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '环颜色',
|
||||
name: 'inRingColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '环宽度',
|
||||
name: 'inRingWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '指标线显示',
|
||||
name: 'isInSplitShow',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '指标线数量',
|
||||
name: 'inSplitNum',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '指标线长度',
|
||||
name: 'inSplitLength',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '指标线宽度',
|
||||
name: 'inSplitWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '指标线颜色',
|
||||
name: 'inSplitColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '刻度线显示',
|
||||
name: 'isInTickShow',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刻度线数量',
|
||||
name: 'inTickNum',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刻度线长度',
|
||||
name: 'inTickLength',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刻度线宽度',
|
||||
name: 'inTickWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '刻度线颜色',
|
||||
name: 'inTickColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '环外环设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '显示',
|
||||
name: 'isRingOnRingShow',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '颜色',
|
||||
name: 'ringOnRingColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#4FADFD'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '中饼图设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '半径',
|
||||
name: 'pieWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 40
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '颜色',
|
||||
name: 'pieColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '边框颜色',
|
||||
name: 'pieBorderColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#3D4268'
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '分块',
|
||||
name: 'pieBlocks',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'four', name: '十字星'},
|
||||
{code: 'five', name: '五角星'},
|
||||
{code: 'six', name: '六芒星'},
|
||||
],
|
||||
value: 'six'
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
],
|
||||
// 坐标
|
||||
position: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '左边距',
|
||||
name: 'left',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '上边距',
|
||||
name: 'top',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '宽度',
|
||||
name: 'width',
|
||||
required: false,
|
||||
placeholder: '该容器在1920px大屏中的宽度',
|
||||
value: 400,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '高度',
|
||||
name: 'height',
|
||||
required: false,
|
||||
placeholder: '该容器在1080px大屏中的高度',
|
||||
value: 300,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -1,383 +1,390 @@
|
||||
/*
|
||||
* @Descripttion: 漏斗图 json
|
||||
* @version:
|
||||
* @version:
|
||||
* @Author: qianlishi
|
||||
* @Date: 2021-08-29 07:29:23
|
||||
* @LastEditors: qianlishi
|
||||
* @LastEditTime: 2021-09-28 14:12:37
|
||||
*/
|
||||
export const widgetFunnel = {
|
||||
code: 'widget-funnel',
|
||||
type: 'chart',
|
||||
label: '漏斗图',
|
||||
icon: 'iconloudoutu',
|
||||
options: {
|
||||
// 配置
|
||||
setup: [
|
||||
code: 'widget-funnel',
|
||||
type: 'chart',
|
||||
label: '漏斗图',
|
||||
icon: 'iconloudoutu',
|
||||
options: {
|
||||
// 配置
|
||||
setup: [
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '图层名称',
|
||||
name: 'layerName',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '漏斗图',
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '背景颜色',
|
||||
name: 'background',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '翻转',
|
||||
name: 'ending',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: false,
|
||||
},
|
||||
[
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '图层名称',
|
||||
name: 'layerName',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '漏斗图',
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '背景颜色',
|
||||
name: 'background',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
[
|
||||
{
|
||||
name: '文字设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '显示',
|
||||
name: 'isShow',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体大小',
|
||||
name: 'fontSize',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'color',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'fontWeight',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '反转',
|
||||
name: 'reversal',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: 0
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '标题设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '标题',
|
||||
name: 'isNoTitle',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '标题',
|
||||
name: 'titleText',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'textColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'textFontWeight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体大小',
|
||||
name: 'textFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体位置',
|
||||
name: 'textAlign',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'center', name: '居中'},
|
||||
{code: 'left', name: '左对齐'},
|
||||
{code: 'right', name: '右对齐'},
|
||||
],
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '副标题',
|
||||
name: 'subText',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'subTextColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'subTextFontWeight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体大小',
|
||||
name: 'subTextFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '提示语设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体大小',
|
||||
name: 'fontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '网格线颜色',
|
||||
name: 'lineColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '图例操作',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '图例',
|
||||
name: 'isShowLegend',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'lengedColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体大小',
|
||||
name: 'lengedFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 16,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '图例宽度',
|
||||
name: 'lengedWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '横向位置',
|
||||
name: 'lateralPosition',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'left', name: '左对齐'},
|
||||
{code: 'right', name: '右对齐'},
|
||||
],
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '纵向位置',
|
||||
name: 'longitudinalPosition',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'top', name: '顶部'},
|
||||
{code: 'bottom', name: '底部'},
|
||||
],
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '布局前置',
|
||||
name: 'layoutFront',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'vertical', name: '竖排'},
|
||||
{code: 'horizontal', name: '横排'},
|
||||
],
|
||||
value: ''
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '自定义配色',
|
||||
list: [
|
||||
{
|
||||
type: 'customColor',
|
||||
label: '',
|
||||
name: 'customColor',
|
||||
required: false,
|
||||
value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
// 数据
|
||||
data: [
|
||||
{
|
||||
type: 'el-radio-group',
|
||||
label: '数据类型',
|
||||
name: 'dataType',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
selectValue: true,
|
||||
selectOptions: [
|
||||
name: '标题设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '标题',
|
||||
name: 'isNoTitle',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '标题',
|
||||
name: 'titleText',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
code: 'staticData',
|
||||
name: '静态数据',
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'textColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#FFD700'
|
||||
},
|
||||
{
|
||||
code: 'dynamicData',
|
||||
name: '动态数据',
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'textFontWeight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体字号',
|
||||
name: 'textFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体位置',
|
||||
name: 'textAlign',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'center', name: '居中'},
|
||||
{code: 'left', name: '左对齐'},
|
||||
{code: 'right', name: '右对齐'},
|
||||
],
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '副标题',
|
||||
name: 'subText',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'subTextColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 'rgba(30, 144, 255, 1)'
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'subTextFontWeight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体字号',
|
||||
name: 'subTextFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 16
|
||||
},
|
||||
],
|
||||
value: 'staticData',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刷新时间(毫秒)',
|
||||
name: 'refreshTime',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'dynamicData',
|
||||
value: 5000
|
||||
},
|
||||
{
|
||||
type: 'el-button',
|
||||
label: '静态数据',
|
||||
name: 'staticData',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'staticData',
|
||||
value: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}],
|
||||
},
|
||||
{
|
||||
type: 'dycustComponents',
|
||||
label: '',
|
||||
name: 'dynamicData',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
relactiveDom: 'dataType',
|
||||
chartType: 'widget-funnel',
|
||||
relactiveDomValue: 'dynamicData',
|
||||
dictKey: 'PIE_PROPERTIES',
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
// 坐标
|
||||
position: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '左边距',
|
||||
name: 'left',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
name: '数值设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '显示',
|
||||
name: 'isShow',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体字号',
|
||||
name: 'fontSize',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'color',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'fontWeight',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '上边距',
|
||||
name: 'top',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
name: '图例操作',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '显示',
|
||||
name: 'isShowLegend',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'lengedColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体字号',
|
||||
name: 'lengedFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 16,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '图例宽度',
|
||||
name: 'lengedWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '横向位置',
|
||||
name: 'lateralPosition',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'center', name: '居中'},
|
||||
{code: 'left', name: '左对齐'},
|
||||
{code: 'right', name: '右对齐'},
|
||||
],
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '纵向位置',
|
||||
name: 'longitudinalPosition',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'top', name: '顶部'},
|
||||
{code: 'bottom', name: '底部'},
|
||||
],
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '布局前置',
|
||||
name: 'layoutFront',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'vertical', name: '竖排'},
|
||||
{code: 'horizontal', name: '横排'},
|
||||
],
|
||||
value: 'horizontal'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '宽度',
|
||||
name: 'width',
|
||||
required: false,
|
||||
placeholder: '该容器在1920px大屏中的宽度',
|
||||
value: 400,
|
||||
name: '提示语设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体字号',
|
||||
name: 'tipFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'lineColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '高度',
|
||||
name: 'height',
|
||||
required: false,
|
||||
placeholder: '该容器在1080px大屏中的高度',
|
||||
value: 200,
|
||||
name: '自定义配色',
|
||||
list: [
|
||||
{
|
||||
type: 'customColor',
|
||||
label: '',
|
||||
name: 'customColor',
|
||||
required: false,
|
||||
value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
],
|
||||
// 数据
|
||||
data: [
|
||||
{
|
||||
type: 'el-radio-group',
|
||||
label: '数据类型',
|
||||
name: 'dataType',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
selectValue: true,
|
||||
selectOptions: [
|
||||
{
|
||||
code: 'staticData',
|
||||
name: '静态数据',
|
||||
},
|
||||
{
|
||||
code: 'dynamicData',
|
||||
name: '动态数据',
|
||||
},
|
||||
],
|
||||
value: 'staticData',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刷新时间(毫秒)',
|
||||
name: 'refreshTime',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'dynamicData',
|
||||
value: 5000
|
||||
},
|
||||
{
|
||||
type: 'el-button',
|
||||
label: '静态数据',
|
||||
name: 'staticData',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'staticData',
|
||||
value: [
|
||||
{"value": 2, "name": "访问"},
|
||||
{"value": 5, "name": "咨询"},
|
||||
{"value": 20, "name": "订单"},
|
||||
{"value": 40, "name": "点击"},
|
||||
{"value": 125, "name": "展现"}
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'dycustComponents',
|
||||
label: '',
|
||||
name: 'dynamicData',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
relactiveDom: 'dataType',
|
||||
chartType: 'widget-funnel',
|
||||
relactiveDomValue: 'dynamicData',
|
||||
dictKey: 'PIE_PROPERTIES',
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
// 坐标
|
||||
position: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '左边距',
|
||||
name: 'left',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '上边距',
|
||||
name: 'top',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '宽度',
|
||||
name: 'width',
|
||||
required: false,
|
||||
placeholder: '该容器在1920px大屏中的宽度',
|
||||
value: 400,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '高度',
|
||||
name: 'height',
|
||||
required: false,
|
||||
placeholder: '该容器在1080px大屏中的高度',
|
||||
value: 500,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<div :style="styleObj">
|
||||
<v-chart :options="options" autoresize/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "widgetRotatePieChart",
|
||||
components: {},
|
||||
props: {
|
||||
value: Object,
|
||||
ispreview: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
title: {},
|
||||
series: [
|
||||
{
|
||||
name: '最外环',
|
||||
type: 'pie',
|
||||
silent: true,
|
||||
radius: ['98%', '97%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: '外四环',
|
||||
type: 'pie',
|
||||
zlevel: 2,
|
||||
silent: true,
|
||||
radius: ['90%', '91%'],
|
||||
startAngle: 50,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: '里四环',
|
||||
type: 'pie',
|
||||
zlevel: 3,
|
||||
silent: true,
|
||||
radius: ['88%', '87%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: '虚线环',
|
||||
type: 'pie',
|
||||
zlevel: 4,
|
||||
silent: true,
|
||||
radius: ['84%', '83%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
},
|
||||
{
|
||||
name: '三分环',
|
||||
type: 'pie',
|
||||
zlevel: 5,
|
||||
silent: true,
|
||||
radius: ['80%', '78%'],
|
||||
color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
|
||||
startAngle: 50,
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
data: [50, 20, 40]
|
||||
},
|
||||
{
|
||||
name: "外指标环",
|
||||
type: 'gauge',
|
||||
splitNumber: 30,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: '73%', //图表尺寸
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 90,
|
||||
endAngle: -269.9999,
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0,
|
||||
},
|
||||
detail: {
|
||||
show: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '里指标环',
|
||||
type: 'gauge',
|
||||
splitNumber: 30,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: '68%',
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 90,
|
||||
endAngle: -269.9999,
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0,
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '环外环',
|
||||
type: 'pie',
|
||||
zlevel: 20,
|
||||
silent: true,
|
||||
radius: ['60%', '59%'],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '中间环形图',
|
||||
type: 'pie',
|
||||
radius: ['40%', '55%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#80ADD2',
|
||||
borderColor: '#3D4268',
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
25, 25, 25, 25, 25, 25
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
optionsStyle: {}, // 样式
|
||||
optionsCollapse: {}, // 图标属性
|
||||
optionsSetup: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styleObj() {
|
||||
return {
|
||||
position: this.ispreview ? "absolute" : "static",
|
||||
width: this.optionsStyle.width + "px",
|
||||
height: this.optionsStyle.height + "px",
|
||||
left: this.optionsStyle.left + "px",
|
||||
top: this.optionsStyle.top + "px",
|
||||
background: this.optionsSetup.background
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.optionsStyle = val.position;
|
||||
this.optionsData = val.data;
|
||||
this.optionsCollapse = val.setup;
|
||||
this.optionsSetup = val.setup;
|
||||
this.editorOptions();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.optionsStyle = this.value.position;
|
||||
this.optionsData = this.value.data;
|
||||
this.optionsCollapse = this.value.setup;
|
||||
this.optionsSetup = this.value.setup;
|
||||
this.editorOptions();
|
||||
},
|
||||
methods: {
|
||||
editorOptions() {
|
||||
this.setOptionsLastRing();
|
||||
this.setOptionsEightRing();
|
||||
this.setOptionsDottedRing();
|
||||
this.setOptionsThreeRing();
|
||||
this.setOptionsOutRing();
|
||||
this.setOptionsInRing();
|
||||
this.setOptionsRingOnRing();
|
||||
this.setOptionsPie();
|
||||
},
|
||||
// 颜色设置
|
||||
setColor(color) {
|
||||
const nullColor = 'rgba(0,0,0,0)'
|
||||
if (color == "") {
|
||||
color = nullColor
|
||||
}
|
||||
return color
|
||||
},
|
||||
// 最外外环1
|
||||
setOptionsLastRing() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series[0];
|
||||
if (optionsSetup.isLastRingShow) {
|
||||
series.data = [0]
|
||||
} else {
|
||||
series.data = ''
|
||||
}
|
||||
const normal = {
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: this.setColor(optionsSetup.lastRing0Color),
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: this.setColor(optionsSetup.lastRing100Color),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
series.itemStyle['normal'] = normal;
|
||||
},
|
||||
setRingPie2() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
let dataArr = [];
|
||||
for (let i = 0; i < 8; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.setColor(optionsSetup.eightColor),
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)'
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return dataArr
|
||||
},
|
||||
// 八分环
|
||||
setOptionsEightRing() {
|
||||
const series = this.options.series;
|
||||
series[1].data = this.setRingPie2();
|
||||
series[2].data = this.setRingPie2();
|
||||
},
|
||||
setRingPie3() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
let dataArr = [];
|
||||
for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.setColor(optionsSetup.dottedColor),
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)'
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return dataArr
|
||||
},
|
||||
// 虚线环
|
||||
setOptionsDottedRing() {
|
||||
const series = this.options.series;
|
||||
series[3].data = this.setRingPie3()
|
||||
},
|
||||
// 三分环
|
||||
setOptionsThreeRing() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series[4];
|
||||
series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)]
|
||||
},
|
||||
// 外指标环
|
||||
setOptionsOutRing() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series;
|
||||
const axisLine = {
|
||||
show: optionsSetup.isOutRingShow,
|
||||
lineStyle: {
|
||||
width: optionsSetup.outRingWidth,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[1, this.setColor(optionsSetup.outRingColor)]
|
||||
]
|
||||
}
|
||||
};
|
||||
const axisTick = {
|
||||
show: optionsSetup.isOutTickShow,
|
||||
lineStyle: {
|
||||
color: this.setColor(optionsSetup.outTickColor),
|
||||
width: optionsSetup.outTickWidth
|
||||
},
|
||||
length: optionsSetup.outTickLength,
|
||||
splitNumber: optionsSetup.outTickWidth
|
||||
};
|
||||
series[5].splitNumber = optionsSetup.outSplitNum
|
||||
const splitLine = {
|
||||
show: optionsSetup.isOutSplitShow,
|
||||
length: optionsSetup.outSplitLength,
|
||||
lineStyle: {
|
||||
color: this.setColor(optionsSetup.outSplitColor),
|
||||
width: optionsSetup.outSplitWidth,
|
||||
}
|
||||
};
|
||||
series[5].axisLine = axisLine
|
||||
series[5].axisTick = axisTick
|
||||
series[5].splitLine = splitLine
|
||||
},
|
||||
// 里指标环
|
||||
setOptionsInRing() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series;
|
||||
const axisLine = {
|
||||
show: optionsSetup.isInRingShow,
|
||||
lineStyle: {
|
||||
width: optionsSetup.inRingWidth,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[1, this.setColor(optionsSetup.inRingColor)],
|
||||
],
|
||||
},
|
||||
};
|
||||
const axisTick = {
|
||||
show: optionsSetup.isInTickShow,
|
||||
lineStyle: {
|
||||
color: this.setColor(optionsSetup.inTickColor),
|
||||
width: optionsSetup.inTickWidth,
|
||||
},
|
||||
length: optionsSetup.inTickLength,
|
||||
splitNumber: optionsSetup.inTickNum,
|
||||
};
|
||||
series[6].splitNumber = optionsSetup.inSplitNum
|
||||
const splitLine = {
|
||||
show: optionsSetup.isInSplitShow,
|
||||
length: optionsSetup.inSplitLength,
|
||||
lineStyle: {
|
||||
color: this.setColor(optionsSetup.inSplitColor),
|
||||
width: optionsSetup.inSplitWidth
|
||||
}
|
||||
};
|
||||
series[6].axisLine = axisLine
|
||||
series[6].axisTick = axisTick
|
||||
series[6].splitLine = splitLine
|
||||
},
|
||||
// 环外环设置
|
||||
setOptionsRingOnRing() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series[7];
|
||||
if (optionsSetup.isRingOnRingShow) {
|
||||
series.data = [0]
|
||||
} else {
|
||||
series.data = ''
|
||||
}
|
||||
const itemStyle = {
|
||||
normal: {
|
||||
color: this.setColor(optionsSetup.ringOnRingColor),
|
||||
}
|
||||
}
|
||||
series.itemStyle = itemStyle
|
||||
},
|
||||
// 中饼图设置
|
||||
setOptionsPie() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series[8];
|
||||
let width = optionsSetup.pieWidth
|
||||
const pieWidth = width + "%"
|
||||
series.radius = [pieWidth, '55%']
|
||||
|
||||
let pieBlocks = optionsSetup.pieBlocks
|
||||
if (pieBlocks == "six") {
|
||||
series.data = [25, 25, 25, 25, 25, 25]
|
||||
} else if (pieBlocks == "five") {
|
||||
series.data = [30, 30, 30, 30, 30]
|
||||
} else {
|
||||
series.data = [40, 40, 40, 40]
|
||||
}
|
||||
const itemStyle = {
|
||||
normal: {
|
||||
color: this.setColor(optionsSetup.pieColor),
|
||||
borderColor: this.setColor(optionsSetup.pieBorderColor),
|
||||
}
|
||||
}
|
||||
series.itemStyle = itemStyle
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue