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

百分比图支持渐变色

Browse Source
qianming 3 years ago
parent 2ce076556e
commit a92124a22b
2 changed files with 43 additions and 181 deletions
Show Stats Download Patch File Download Diff File

154
report-ui/src/views/report/bigscreen/designer/tools.js
Unescape Escape View File

@ -5071,70 +5071,6 @@ const widgetTools = [
value: '' value: ''
}, },
[ [
/*{
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: '#FFD700'
},
{
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'
}
],
},*/
{ {
name: '数值设置', name: '数值设置',
list: [ list: [
@ -5203,22 +5139,6 @@ const widgetTools = [
{ {
name: '圆环设置', name: '圆环设置',
list: [ list: [
/* {
type: 'vue-color',
label: '0%处',
name: 'colorStart',
required: false,
placeholder: '',
value: '#4FADFD'
},
{
type: 'vue-color',
label: '100%处',
name: 'colorEnd',
required: false,
placeholder: '',
value: '#28E8FA'
},*/
{ {
type: 'el-input-number', type: 'el-input-number',
label: '刻度数量', label: '刻度数量',
@ -5253,79 +5173,35 @@ const widgetTools = [
}, },
] ]
}, },
/*{ {
name: '图例操作', name: '渐变色',
list: [ list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{ {
type: 'vue-color', type: 'vue-color',
label: '字体颜色', label: '0%处颜色',
name: 'lengedColor', name: 'color0Start',
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, required: false,
placeholder: '', placeholder: '',
selectOptions: [ value: '#4FADFD'
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: ''
}, },
{ {
type: 'el-select', type: 'vue-color',
label: '纵向位置', label: '100%颜色',
name: 'longitudinalPosition', name: 'color100End',
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ value: '#28E8FA'
{ code: 'top', name: '顶部' },
{ code: 'bottom', name: '底部' },
],
value: ''
}, },
{ {
type: 'el-select', type: 'vue-color',
label: '布局前置', label: '余处颜色',
name: 'layoutFront', name: 'colorsurplus',
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ value: '#173164'
{ code: 'vertical', name: '竖排' },
{ code: 'horizontal', name: '横排' },
],
value: ''
}, },
], ]
},*/ }
], ],
], ],
// 数据 // 数据

70
report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue
Unescape Escape View File

@ -254,6 +254,7 @@ export default {
show: false, show: false,
}, },
}, },
//剩余圆环颜色
itemStyle: { itemStyle: {
normal: { normal: {
color: '#173164', color: '#173164',
@ -359,9 +360,10 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
//this.setOptionsTooltip(); //this.setOptionsTooltip();
//this.setOptionsLegend(); //this.setOptionsLegend();
//this.setOptionsColor(); this.setOptionsColor();
this.setOptionsData(); this.setOptionsData();
this.setOptionLine(); this.setOptionLine();
this.setOptionSurplusColor();
}, },
setOptionsTitle() { setOptionsTitle() {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
@ -397,48 +399,33 @@ export default {
} }
}, },
//圆环0-100%颜色 //圆环0-100%颜色
/*setOptionPerData(val) { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const data = this.options.series[6]['data']; const itemStyle = this.options.series[6]['data'][0]['itemStyle']
data.forEach((ev, index) => { const normal = {
if (index == 0) { color: {
ev.value = val // 完成的圆环的颜色
const itemStyle = { colorStops: [
normal: { {
color: { offset: 0,
colorStops: [ color: optionsSetup.color0Start, // 0% 处的颜色
{
offset: 0,
color: optionsSetup.colorStart, // 0% 处的颜色
},
{
offset: 1,
color: optionsSetup.colorEnd, // 100% 处的颜色
},
]
}
}
};
data['itemStyle'] = itemStyle
} else if (index == 1) {
ev.value = (100 - val)
const label = {
normal: {
show: false,
}, },
}; {
const itemStyle = { offset: 1,
/!*normal: { color: optionsSetup.color100End, // 100% 处的颜色
color: '#173164', },
},*!/ ],
}; },
data['label'] = label; };
data['itemStyle'] = itemStyle; itemStyle['normal'] = normal
} else { },
} setOptionSurplusColor(){
; const itemStyle = this.options.series[6]['data'][1]['itemStyle']
}) const normal = {
},*/ color: this.optionsSetup.colorsurplus,
};
itemStyle['normal'] = normal
},
setOptionLine() { setOptionLine() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const line = this.options.series[7]['splitLine']; const line = this.options.series[7]['splitLine'];
@ -466,7 +453,6 @@ export default {
title.text = '{nums|' + val + '}{percent|%}'; title.text = '{nums|' + val + '}{percent|%}';
this.options.series[6]['data'][0]['value'] = val ; this.options.series[6]['data'][0]['value'] = val ;
this.options.series[6]['data'][1]['value'] = 100 - val ; this.options.series[6]['data'][1]['value'] = 100 - val ;
//this.setOptionPerData(val)
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;

Write Preview
Loading…
Cancel
Save