多柱线图调整

qianming 3 years ago
parent 83c4a2b930
commit 690258ccab

@ -229,10 +229,10 @@ export const widgetMoreBarLine = {
{ {
type: 'el-input-text', type: 'el-input-text',
label: '图例名称', label: '图例名称',
name: 'layerName', name: 'legendName',
required: false, required: false,
placeholder: '', placeholder: '多值以英文,隔开',
value: '', value: '成功,失败,终止,成功率'
}, },
{ {
type: 'vue-color', type: 'vue-color',
@ -248,7 +248,7 @@ export const widgetMoreBarLine = {
name: 'lengedFontSize', name: 'lengedFontSize',
required: false, required: false,
placeholder: '', placeholder: '',
value: 16, value: 12,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
@ -256,7 +256,7 @@ export const widgetMoreBarLine = {
name: 'lengedWidth', name: 'lengedWidth',
required: false, required: false,
placeholder: '', placeholder: '',
value: 15, value: 12,
}, },
{ {
type: 'el-select', type: 'el-select',
@ -268,7 +268,7 @@ export const widgetMoreBarLine = {
{code: 'left', name: '左对齐'}, {code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'}, {code: 'right', name: '右对齐'},
], ],
value: '' value: 'left'
}, },
{ {
type: 'el-select', type: 'el-select',
@ -280,7 +280,7 @@ export const widgetMoreBarLine = {
{code: 'top', name: '顶部'}, {code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'}, {code: 'bottom', name: '底部'},
], ],
value: '' value: 'top'
}, },
{ {
type: 'el-select', type: 'el-select',
@ -292,7 +292,7 @@ export const widgetMoreBarLine = {
{code: 'vertical', name: '竖排'}, {code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'}, {code: 'horizontal', name: '横排'},
], ],
value: '未销,核销,总共,比例' value: 'horizontal'
}, },
], ],
}, },
@ -655,7 +655,12 @@ export const widgetMoreBarLine = {
label: '', label: '',
name: 'customColor', name: 'customColor',
required: false, required: false,
value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], value: [
{color: '#4bdfff'},
{color: '#5dc1fd'},
{color: '#55f49c'},
{color: '#ffa43a'},
],
}, },
], ],
}, },
@ -745,7 +750,7 @@ export const widgetMoreBarLine = {
name: 'width', name: 'width',
required: false, required: false,
placeholder: '该容器在1920px大屏中的宽度', placeholder: '该容器在1920px大屏中的宽度',
value: 400, value: 500,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
@ -753,7 +758,7 @@ export const widgetMoreBarLine = {
name: 'height', name: 'height',
required: false, required: false,
placeholder: '该容器在1080px大屏中的高度', placeholder: '该容器在1080px大屏中的高度',
value: 200, value: 300,
}, },
], ],
} }

@ -134,7 +134,7 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
this.setOptionsTop(); this.setOptionsLine();
this.setOptionsBar(); this.setOptionsBar();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsData(); this.setOptionsData();
@ -262,7 +262,7 @@ export default {
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 线 // 线
setOptionsTop() { setOptionsLine() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
for (const key in series) { for (const key in series) {

@ -172,7 +172,7 @@ export default {
lineStyle: { lineStyle: {
color: "#ffa43a" color: "#ffa43a"
}, },
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5] data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2]
} }
] ]
} }
@ -215,14 +215,15 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
/* this.setOptionsLegend();
this.setOptionsTop(); this.setOptionsLine();
this.setOptionsBar(); this.setOptionsBar();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsData();
this.setOptionsMargin(); this.setOptionsMargin();
this.setOptionsLegend(); this.setOptionsColor();
this.setOptionsColor();*/ /*
this.setOptionsData();
*/
}, },
// //
setOptionsTitle() { setOptionsTitle() {
@ -340,6 +341,40 @@ export default {
]; ];
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 线
setOptionsLine() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100
};
} else {
series[key].areaStyle = {
opacity: 0
};
}
series[key].lineStyle = {
width: optionsSetup.lineWidth
};
series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = {
show: optionsSetup.isShowLine,
position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine
};
}
}
this.options.series = series;
},
// //
setOptionsBar() { setOptionsBar() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -389,6 +424,9 @@ export default {
setOptionsLegend() { setOptionsLegend() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
let legendName = optionsSetup.legendName;
let arr = legendName.split(",")
legend.data = arr;
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";

Loading…
Cancel
Save