mirror of
https://gitee.com/anji-plus/report.git
synced 2026-03-24 09:48:34 +08:00
装饰图调整
This commit is contained in:
qianming
@@ -9,7 +9,7 @@
|
||||
export const widgetDecoratePie = {
|
||||
code: 'widgetDecoratePieChart',
|
||||
type: 'chart',
|
||||
label: '静态装饰饼图',
|
||||
label: '装饰饼图',
|
||||
icon: 'iconicon_tubiao_bingtu',
|
||||
options: {
|
||||
// 配置
|
||||
@@ -20,7 +20,7 @@ export const widgetDecoratePie = {
|
||||
name: 'layerName',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '装饰饼图',
|
||||
value: '静态装饰饼图',
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
@@ -140,7 +140,7 @@ export const widgetDecoratePie = {
|
||||
name: 'outRingColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#28E8FA'
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
@@ -188,7 +188,7 @@ export const widgetDecoratePie = {
|
||||
name: 'outSplitColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#28E8FA'
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
@@ -228,7 +228,7 @@ export const widgetDecoratePie = {
|
||||
name: 'outTickColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#28E8FA'
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
]
|
||||
},
|
||||
@@ -249,7 +249,7 @@ export const widgetDecoratePie = {
|
||||
name: 'inRingColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#28E8FA'
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
@@ -297,7 +297,7 @@ export const widgetDecoratePie = {
|
||||
name: 'inSplitColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#28E8FA'
|
||||
value: '#0dc2fe'
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
@@ -337,7 +337,70 @@ export const widgetDecoratePie = {
|
||||
name: 'inTickColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#28E8FA'
|
||||
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'
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
@@ -104,6 +104,7 @@ export default {
|
||||
radius: ['80%', '78%'],
|
||||
color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
|
||||
startAngle: 50,
|
||||
avoidLabelOverlap: true,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
@@ -159,7 +160,6 @@ export default {
|
||||
silent: true,
|
||||
radius: ['60%', '59%'],
|
||||
hoverAnimation: false,
|
||||
data: [1],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
@@ -170,17 +170,11 @@ export default {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#28E8FA',
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '中间环形图',
|
||||
type: 'pie',
|
||||
radius: ['35%', '55%'],
|
||||
radius: ['40%', '55%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
@@ -258,6 +252,16 @@ export default {
|
||||
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() {
|
||||
@@ -268,24 +272,16 @@ export default {
|
||||
} else {
|
||||
series.data = ''
|
||||
}
|
||||
let lastRing0Color = optionsSetup.lastRing0Color;
|
||||
let lastRing100Color = optionsSetup.lastRing100Color;
|
||||
if (lastRing0Color == "") {
|
||||
lastRing0Color = 'rgba(0,0,0,0)'
|
||||
}
|
||||
if (lastRing100Color == "") {
|
||||
lastRing100Color = 'rgba(0,0,0,0)'
|
||||
}
|
||||
const normal = {
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: lastRing0Color,
|
||||
color: this.setColor(optionsSetup.lastRing0Color),
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: lastRing100Color,
|
||||
color: this.setColor(optionsSetup.lastRing100Color),
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -294,10 +290,6 @@ export default {
|
||||
},
|
||||
setRingPie2() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
let eightColor = optionsSetup.eightColor;
|
||||
if (eightColor == "") {
|
||||
eightColor = 'rgba(0,0,0,0)';
|
||||
}
|
||||
let dataArr = [];
|
||||
for (let i = 0; i < 8; i++) {
|
||||
if (i % 2 === 0) {
|
||||
@@ -306,7 +298,7 @@ export default {
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: eightColor,
|
||||
color: this.setColor(optionsSetup.eightColor),
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)'
|
||||
}
|
||||
@@ -334,10 +326,6 @@ export default {
|
||||
},
|
||||
setRingPie3() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
let dottedColor = optionsSetup.dottedColor;
|
||||
if (dottedColor == "") {
|
||||
dottedColor = 'rgba(0,0,0,0)';
|
||||
}
|
||||
let dataArr = [];
|
||||
for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
|
||||
if (i % 2 === 0) {
|
||||
@@ -346,7 +334,7 @@ export default {
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: dottedColor,
|
||||
color: this.setColor(optionsSetup.dottedColor),
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)'
|
||||
}
|
||||
@@ -359,8 +347,6 @@ export default {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -376,62 +362,38 @@ export default {
|
||||
// 三分环
|
||||
setOptionsThreeRing() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series;
|
||||
let three1Color = optionsSetup.three1Color;
|
||||
let three2Color = optionsSetup.three2Color;
|
||||
let three3Color = optionsSetup.three3Color;
|
||||
if (three1Color == "") {
|
||||
three1Color = 'rgba(0,0,0,0)'
|
||||
}
|
||||
if (three2Color == "") {
|
||||
three2Color = 'rgba(0,0,0,0)'
|
||||
}
|
||||
if (three3Color == "") {
|
||||
three3Color = 'rgba(0,0,0,0)'
|
||||
}
|
||||
series[4].color = [three1Color, three2Color, three3Color]
|
||||
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;
|
||||
let outRingColor = optionsSetup.outRingColor
|
||||
if (outRingColor == "") {
|
||||
outRingColor = 'rgba(0,0,0,0)';
|
||||
}
|
||||
const axisLine = {
|
||||
show: optionsSetup.isOutRingShow,
|
||||
lineStyle: {
|
||||
width: optionsSetup.outRingWidth,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[1, outRingColor]
|
||||
[1, this.setColor(optionsSetup.outRingColor)]
|
||||
]
|
||||
}
|
||||
};
|
||||
let outTickColor = optionsSetup.outTickColor
|
||||
if (outTickColor == "") {
|
||||
outTickColor = 'rgba(0,0,0,0)';
|
||||
}
|
||||
const axisTick = {
|
||||
show: optionsSetup.isOutTickShow,
|
||||
lineStyle: {
|
||||
color: outTickColor,
|
||||
color: this.setColor(optionsSetup.outTickColor),
|
||||
width: optionsSetup.outTickWidth
|
||||
},
|
||||
length: optionsSetup.outTickLength,
|
||||
splitNumber: optionsSetup.outTickWidth
|
||||
};
|
||||
series[5].splitNumber = optionsSetup.outSplitNum
|
||||
let outSplitColor = optionsSetup.outSplitColor
|
||||
if (outSplitColor == "") {
|
||||
outSplitColor = 'rgba(0,0,0,0)'
|
||||
}
|
||||
const splitLine = {
|
||||
show: optionsSetup.isOutSplitShow,
|
||||
length: optionsSetup.outSplitLength,
|
||||
lineStyle: {
|
||||
color: outSplitColor,
|
||||
color: this.setColor(optionsSetup.outSplitColor),
|
||||
width: optionsSetup.outSplitWidth,
|
||||
}
|
||||
};
|
||||
@@ -443,43 +405,31 @@ export default {
|
||||
setOptionsInRing() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series;
|
||||
let inRingColor = optionsSetup.inRingColor
|
||||
if (inRingColor == "") {
|
||||
inRingColor = 'rgba(0,0,0,0)'
|
||||
}
|
||||
const axisLine = {
|
||||
show: optionsSetup.isInRingShow,
|
||||
lineStyle: {
|
||||
lineStyle: {
|
||||
width: optionsSetup.inRingWidth,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[1, inRingColor],
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[1, this.setColor(optionsSetup.inRingColor)],
|
||||
],
|
||||
},
|
||||
};
|
||||
let inTickColor = optionsSetup.inTickColor
|
||||
if (inTickColor == "") {
|
||||
inTickColor = 'rgba(0,0,0,0)'
|
||||
}
|
||||
const axisTick = {
|
||||
show: optionsSetup.isInTickShow,
|
||||
lineStyle: {
|
||||
color: inTickColor,
|
||||
width: optionsSetup.inTickWidth,
|
||||
lineStyle: {
|
||||
color: this.setColor(optionsSetup.inTickColor),
|
||||
width: optionsSetup.inTickWidth,
|
||||
},
|
||||
length: optionsSetup.inTickLength,
|
||||
splitNumber: optionsSetup.inTickNum,
|
||||
splitNumber: optionsSetup.inTickNum,
|
||||
};
|
||||
series[6].splitNumber = optionsSetup.inSplitNum
|
||||
let inSplitColor = optionsSetup.inSplitColor
|
||||
if (inSplitColor == "") {
|
||||
inSplitColor = 'rgba(0,0,0,0)'
|
||||
}
|
||||
const splitLine = {
|
||||
show: optionsSetup.isInSplitShow,
|
||||
length: optionsSetup.inSplitLength,
|
||||
lineStyle: {
|
||||
color: inSplitColor,
|
||||
color: this.setColor(optionsSetup.inSplitColor),
|
||||
width: optionsSetup.inSplitWidth
|
||||
}
|
||||
};
|
||||
@@ -487,6 +437,46 @@ export default {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user