柱状对比图功能更新

qianming 3 years ago
parent e269ddca85
commit 9363626bcb

@ -7151,6 +7151,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 14, value: 14,
}, },
{
type: 'el-switch',
label: 'X轴线',
name: 'xLineLeft',
require: false,
placeholder: '',
value: false,
},
{ {
type: 'vue-color', type: 'vue-color',
label: '轴颜色', label: '轴颜色',
@ -7161,24 +7169,32 @@ const widgetTools = [
}, },
{ {
type: 'el-switch', type: 'el-switch',
label: 'X轴线', label: '竖分割线',
name: 'downSplitLineXLeft', name: 'SplitLineLeft',
require: false, require: false,
placeholder: '', placeholder: '',
value: false, value: false,
}, },
{ {
type: 'el-switch', type: 'vue-color',
label: '分割线', label: '分割线颜色',
name: 'SplitLineXLeft', name: 'SplitLineColorLeft',
require: false, required: false,
placeholder: '', placeholder: '',
value: false, value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'SplitLinefontSizeLeft',
required: false,
placeholder: '',
value: 1,
}, },
{ {
type: 'el-switch', type: 'el-switch',
label: '边框线', label: '边框线',
name: 'upSplitLineXLeft', name: 'frameLineLeft',
require: false, require: false,
placeholder: '', placeholder: '',
value: false, value: false,
@ -7191,100 +7207,83 @@ const widgetTools = [
{ {
type: 'el-switch', type: 'el-switch',
label: '显示', label: '显示',
name: 'hideX', name: 'hideXRight',
required: false, required: false,
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{ {
type: 'el-input-text', type: 'el-input-number',
label: 'X轴别名', label: '数值间隔',
name: 'xName', name: 'splitNumberRight',
required: false, required: false,
placeholder: '', placeholder: '',
value: '' value: ''
}, },
{ {
type: 'vue-color', type: 'vue-color',
label: '别名颜色', label: '数值颜色',
name: 'xNameColor', name: 'XcolorRight',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff' value: '#fff',
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
label: '别名字号', label: '数值字号',
name: 'xNameFontSize', name: 'fontSizeXRight',
required: false, required: false,
placeholder: '', placeholder: '',
value: 14 value: 14,
}, },
{ {
type: 'el-switch', type: 'el-switch',
label: '轴反转', label: 'X轴线',
name: 'reversalX', name: 'xLineRight',
required: false, require: false,
placeholder: '', placeholder: '',
value: false value: false,
}, },
{ {
type: 'el-slider', type: 'vue-color',
label: '文字角度', label: '轴颜色',
name: 'textAngleX', name: 'lineColorXRight',
required: false, required: false,
placeholder: '', placeholder: '',
value: 0 value: '#fff',
}, },
{ {
type: 'el-input-number', type: 'el-switch',
label: '文字间隔', label: '竖分割线',
name: 'textInterval', name: 'SplitLineRight',
required: false, require: false,
placeholder: '', placeholder: '',
value: '' value: false,
}, },
{ {
type: 'vue-color', type: 'vue-color',
label: '文字颜色', label: '分割线颜色',
name: 'Xcolor', name: 'SplitLineColorRight',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff', value: '#fff',
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
label: '文字字号', label: '分割线宽度',
name: 'fontSizeX', name: 'SplitLinefontSizeRight',
required: false, required: false,
placeholder: '', placeholder: '',
value: 14, value: 1,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
}, },
{ {
type: 'el-switch', type: 'el-switch',
label: '分割线显示', label: '边框线',
name: 'isShowSplitLineX', name: 'frameLineRight',
require: false, require: false,
placeholder: '', placeholder: '',
value: false, value: false,
}, },
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {

@ -276,6 +276,7 @@ export default {
editorOptions() { editorOptions() {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsXLeft(); this.setOptionsXLeft();
this.setOptionsXRight();
this.setOptionsTop(); this.setOptionsTop();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsGrid(); this.setOptionsGrid();
@ -305,7 +306,10 @@ export default {
type: 'value', type: 'value',
inverse: true, inverse: true,
axisLine: {//X线 axisLine: {//X线
show: false, show: optionsSetup.xLineLeft,
lineStyle: {
color: optionsSetup.lineColorXLeft,
},
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -314,21 +318,56 @@ export default {
axisLabel: { // x axisLabel: { // x
show: optionsSetup.hideXLeft, show: optionsSetup.hideXLeft,
textStyle: { textStyle: {
color : optionsSetup.lineColorXLeft, color : optionsSetup.XcolorLeft,
fontSize: optionsSetup.fontSizeXLeft fontSize: optionsSetup.fontSizeXLeft
} }
}, },
splitLine: { // 线 splitLine: { // 线
show: false, show: optionsSetup.SplitLineLeft,
lineStyle: { lineStyle: {
color: '#57617f', color: optionsSetup.SplitLineColorLeft,
width: 1, width: optionsSetup.SplitLinefontSizeLeft,
type: 'solid' type: 'solid'
} }
} }
} }
this.options.xAxis[0] = xAxisLeft; this.options.xAxis[0] = xAxisLeft;
}, },
// X
setOptionsXRight() {
const optionsSetup = this.optionsSetup;
const xAxisRight = {
gridIndex: 2,
splitNumber: optionsSetup.splitNumberRight,
type: 'value',
axisLine: {//X线
show: optionsSetup.xLineRight,
lineStyle: {
color: optionsSetup.lineColorXRight,
},
},
axisTick: {
show: false,
},
position: 'bottom',
axisLabel: { // x
show: optionsSetup.hideXRight,
textStyle: {
color : optionsSetup.XcolorRight,
fontSize: optionsSetup.fontSizeXRight
}
},
splitLine: { // 线
show: optionsSetup.SplitLineRight,
lineStyle: {
color: optionsSetup.SplitLineColorRight,
width: optionsSetup.SplitLinefontSizeRight,
type: 'solid'
}
}
}
this.options.xAxis[2] = xAxisRight;
},
// //
setOptionsTop() { setOptionsTop() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -388,7 +427,7 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const grid = [ const grid = [
{// {//
show: false, show: optionsSetup.frameLineLeft,
left: optionsSetup.marginLeftRight, left: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
@ -403,7 +442,7 @@ export default {
width: '0%' width: '0%'
}, },
{// {//
show: false, show: optionsSetup.frameLineRight,
right: optionsSetup.marginLeftRight, right: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,

Loading…
Cancel
Save