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

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

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

Write Preview
Loading…
Cancel
Save