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: '图例操作',
list: [
{ {
type: 'el-switch', name: '渐变色',
label: '图例', list: [
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: ''
}, },
], ]
},*/ }
], ],
], ],
// 数据 // 数据

50
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) {
ev.value = val
const itemStyle = {
normal: {
color: { color: {
// 完成的圆环的颜色
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: optionsSetup.colorStart, // 0% 处的颜色 color: optionsSetup.color0Start, // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: optionsSetup.colorEnd, // 100% 处的颜色 color: optionsSetup.color100End, // 100% 处的颜色
}, },
] ],
}
}
};
data['itemStyle'] = itemStyle
} else if (index == 1) {
ev.value = (100 - val)
const label = {
normal: {
show: false,
}, },
}; };
const itemStyle = { itemStyle['normal'] = normal
/!*normal: { },
color: '#173164', setOptionSurplusColor(){
},*!/ const itemStyle = this.options.series[6]['data'][1]['itemStyle']
const normal = {
color: this.optionsSetup.colorsurplus,
}; };
data['label'] = label; itemStyle['normal'] = normal
data['itemStyle'] = itemStyle; },
} else {
}
;
})
},*/
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