ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

装饰图调整

Browse Source
qianming 3 years ago
parent c90bbf4a53
commit 8fa2f68311
2 changed files with 350 additions and 73 deletions
Show Stats Download Patch File Download Diff File

220
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js
Unescape Escape View File

@ -9,7 +9,7 @@
export const widgetDecoratePie = { export const widgetDecoratePie = {
code: 'widgetDecoratePieChart', code: 'widgetDecoratePieChart',
type: 'chart', type: 'chart',
label: '装饰饼图', label: '静态装饰饼图',
icon: 'iconicon_tubiao_bingtu', icon: 'iconicon_tubiao_bingtu',
options: { options: {
// 配置 // 配置
@ -123,6 +123,224 @@ export const widgetDecoratePie = {
}, },
] ]
}, },
{
name: '外指标环设置',
list: [
{
type: 'el-switch',
label: '环显示',
name: 'isOutRingShow',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '环颜色',
name: 'outRingColor',
required: false,
placeholder: '',
value: '#28E8FA'
},
{
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: '#28E8FA'
},
{
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: '#28E8FA'
},
]
},
{
name: '里指标环设置',
list: [
{
type: 'el-switch',
label: '环显示',
name: 'isInRingShow',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '环颜色',
name: 'inRingColor',
required: false,
placeholder: '',
value: '#28E8FA'
},
{
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: '#28E8FA'
},
{
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: '#28E8FA'
},
]
},
], ],
], ],
// 坐标 // 坐标

203
report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue
Unescape Escape View File

@ -5,7 +5,6 @@
</template> </template>
<script> <script>
import echarts from "echarts";
export default { export default {
name: "widgetRotatePieChart", name: "widgetRotatePieChart",
@ -114,45 +113,19 @@ export default {
data: [50, 20, 40] data: [50, 20, 40]
}, },
{ {
name: "长刻度环", name: "外指标环",
type: 'gauge', type: 'gauge',
splitNumber: 30, //刻度数量 splitNumber: 30,
min: 0, min: 0,
max: 100, max: 100,
radius: '73%', //图表尺寸 radius: '73%', //图表尺寸
center: ['50%', '50%'], center: ['50%', '50%'],
startAngle: 90, startAngle: 90,
endAngle: -269.9999, endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[1, '#0dc2fe']
]
}
},
axisTick: {
show: false,
lineStyle: {
color: 'auto',
width: 2
},
length: 20,
splitNumber: 5
},
splitLine: {
show: true,
length: 32,
lineStyle: {
color: 'auto',
}
},
axisLabel: { axisLabel: {
show: false show: false
}, },
pointer: { //仪表盘指针 pointer: {
show: 0, show: 0,
}, },
detail: { detail: {
@ -160,61 +133,49 @@ export default {
}, },
}, },
{ {
name: '短刻度环', name: '里指标环',
type: 'gauge', type: 'gauge',
splitNumber: 30, //刻度数量 splitNumber: 30,
min: 0, min: 0,
max: 100, max: 100,
radius: '68%', //图表尺寸 radius: '68%',
center: ['50%', '50%'], center: ['50%', '50%'],
startAngle: 90, startAngle: 90,
endAngle: -269.9999, endAngle: -269.9999,
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[0, '#0dc2fe'],
[1, '#0dc2fe']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: '#0dc2fe',
width: 2
},
length: 20,
splitNumber: 5
},
splitLine: {
show: true,
length: 20,
lineStyle: {
color: '#0dc2fe',
}
},
axisLabel: { axisLabel: {
show: false show: false
}, },
pointer: { //仪表盘指针 pointer: {
show: 0, show: 0,
}, },
detail: { detail: {
show: false, show: false,
borderColor: '#fff', },
shadowColor: '#fff', //默认透明 },
shadowBlur: 2, {
offsetCenter: [0, '0%'], // x, y，单位px name: '环外环',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE type: 'pie',
color: '#fff', zlevel: 20,
fontSize: 50, silent: true,
radius: ['60%', '59%'],
hoverAnimation: false,
data: [1],
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: '#28E8FA',
show: false,
}, },
formatter: '{value}'
}, },
data: []
}, },
{ {
name: '中间环形图', name: '中间环形图',
@ -295,6 +256,8 @@ export default {
this.setOptionsEightRing(); this.setOptionsEightRing();
this.setOptionsDottedRing(); this.setOptionsDottedRing();
this.setOptionsThreeRing(); this.setOptionsThreeRing();
this.setOptionsOutRing();
this.setOptionsInRing();
}, },
// 最外外环1 // 最外外环1
setOptionsLastRing() { setOptionsLastRing() {
@ -426,8 +389,104 @@ export default {
if (three3Color == "") { if (three3Color == "") {
three3Color = 'rgba(0,0,0,0)' three3Color = 'rgba(0,0,0,0)'
} }
series[4].color = [three1Color,three2Color,three3Color] series[4].color = [three1Color, three2Color, 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]
]
}
};
let outTickColor = optionsSetup.outTickColor
if (outTickColor == "") {
outTickColor = 'rgba(0,0,0,0)';
}
const axisTick = {
show: optionsSetup.isOutTickShow,
lineStyle: {
color: 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,
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;
let inRingColor = optionsSetup.inRingColor
if (inRingColor == "") {
inRingColor = 'rgba(0,0,0,0)'
}
const axisLine = {
show: optionsSetup.isInRingShow,
lineStyle: {
width: optionsSetup.inRingWidth,
shadowBlur: 0,
color: [
[1, inRingColor],
],
},
};
let inTickColor = optionsSetup.inTickColor
if (inTickColor == "") {
inTickColor = 'rgba(0,0,0,0)'
}
const axisTick = {
show: optionsSetup.isInTickShow,
lineStyle: {
color: inTickColor,
width: optionsSetup.inTickWidth,
},
length: optionsSetup.inTickLength,
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,
width: optionsSetup.inSplitWidth
}
};
series[6].axisLine = axisLine
series[6].axisTick = axisTick
series[6].splitLine = splitLine
},
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save