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);
|
||||||
|
|
||||||
|
|
||||||
@ -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,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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