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

饼图调整

Browse Source
qianming 3 years ago
parent 8b6e39334c
commit c729c8a450
2 changed files with 104 additions and 177 deletions
Show Stats Download Patch File Download Diff File

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

@ -56,111 +56,43 @@ export const widgetDecoratePie = {
name: 'lastRing100Color',
required: false,
placeholder: '',
value: 'rgba(235, 10, 10, 1)'
value: '#28E8FA'
},
]
},
{
name: '标题设置',
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',
label: '颜色',
name: 'eightColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
value: '#4FADFD'
},
]
},
{
name: '虚线环设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
label: '虚线数量',
name: 'dottedNum',
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: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
value: 40
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
label: '颜色',
name: 'dottedColor',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
value: '#28E8FA'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 12
},
],
]
},
],
],

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

@ -34,30 +34,19 @@ export default {
},
itemStyle: {
normal: {
color: {
colorStops: [
{
offset: 0,
color: '#4FADFD', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(235, 10, 10, 1)', // 100% 处的颜色
},
],
},
show: false,
},
},
data: [0]
},
{
name: '外四环',
type: 'pie',
zlevel: 2,
silent: true,
radius: ['90%', '91%'],
startAngle: 50,
hoverAnimation: false,
// animation:false, //charts3 no
label: {
normal: {
show: false
@ -68,9 +57,10 @@ export default {
show: false
}
},
data: this.pie2()
data: [0]
},
{
name: '里四环',
type: 'pie',
zlevel: 3,
silent: true,
@ -85,9 +75,10 @@ export default {
show: false
}
},
data: this.pie2()
data: [0]
},
{
name: '虚线环',
type: 'pie',
zlevel: 4,
silent: true,
@ -102,9 +93,10 @@ export default {
show: false
}
},
data: this.pie3()
data: [0]
},
{
name: '三分环',
type: 'pie',
zlevel: 5,
silent: true,
@ -121,7 +113,7 @@ export default {
data: [50, 20, 40]
},
{
name: "",
name: "刻度环",
type: 'gauge',
splitNumber: 30, //刻度数量
min: 0,
@ -167,7 +159,7 @@ export default {
},
},
{
//name: '统计',
name: '刻度环',
type: 'gauge',
splitNumber: 30, //刻度数量
min: 0,
@ -223,21 +215,6 @@ export default {
},
data: []
},
{
type: 'pie',
zlevel: 20,
silent: true,
radius: ['60%', '59%'],
hoverAnimation: false,
color: '#2dc0c9',
// animation:false,
//data: [1],
labelLine: {
normal: {
show: false
}
}
},
{
name: '中间环形图',
type: 'pie',
@ -312,7 +289,42 @@ export default {
this.editorOptions();
},
methods: {
pie2() {
editorOptions() {
this.setOptionsLastRing();
this.setOptionsEightRing();
this.setOptionsDottedRing();
},
// 最外外环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: optionsSetup.lastRing0Color,
},
{
offset: 1,
color: optionsSetup.lastRing100Color,
},
],
},
};
series.itemStyle['normal'] = normal;
},
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) {
@ -321,9 +333,9 @@ export default {
value: 25,
itemStyle: {
normal: {
color: "rgba(88,142,197,0.5)",
color: optionsSetup.eightColor,
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
borderColor: 'rgba(0,0,0,0)'
}
}
})
@ -333,9 +345,7 @@ export default {
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
color: 'rgba(0,0,0,0)'
}
}
})
@ -343,18 +353,28 @@ export default {
}
return dataArr
},
pie3() {
setOptionsEightRing() {
const series = this.options.series;
series[1].data = this.setRingPie2();
series[2].data = this.setRingPie2();
},
setRingPie3() {
const optionsSetup = this.optionsSetup;
let dottedColor = optionsSetup.dottedColor;
if (dottedColor == "") {
dottedColor = 'rgba(0,0,0,0)';
}
let dataArr = [];
for (let i = 0; i < 100; i++) {
for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: "rgb(126,190,255)",
color: dottedColor,
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
borderColor: 'rgba(0,0,0,0)'
}
}
})
@ -364,7 +384,7 @@ export default {
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
@ -374,56 +394,31 @@ export default {
}
return dataArr
},
editorOptions() {
this.setOptionsLastRing();
//this.setOptionsTitle();
setOptionsDottedRing(){
const series = this.options.series;
series[3].data = this.setRingPie3()
},
// 最外外环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: optionsSetup.lastRing0Color,
},
{
offset: 1,
color: optionsSetup.lastRing100Color,
},
],
},
// 标题修改
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
};
series.itemStyle['normal'] = normal;
},
// 标题修改
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
};
title.subtext = optionsCollapse.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
};
this.options.title = title;
},
}
title.subtext = optionsCollapse.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
};
this.options.title = title;
},
}
}
</script>

Write Preview
Loading…
Cancel
Save