feat--X轴数值显示自动换行

qianming 1 year ago
parent ae1ecbfb78
commit 144998c514

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -185,18 +185,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -434,6 +422,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
let axis = []; let axis = [];
let bar1 = []; let bar1 = [];
@ -452,6 +441,30 @@ export default {
const legendName = []; const legendName = [];
legendName.push("bar1"); legendName.push("bar1");
legendName.push("bar2"); legendName.push("bar2");
// xXlabel
const wordNum = parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -473,18 +486,47 @@ export default {
}); });
}, },
renderingFn(val) { renderingFn(val) {
const optionsSetup = this.optionsSetup;
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
// series // series
const series = this.options.series; const series = this.options.series;
const legendName = []; const legendName = [];
let k = 0; let k = 0;
for (const i in val.series){ for (const i in val.series) {
if (val.series[i].type == "bar") { if (val.series[i].type == "bar") {
series[k]['data'] = val.series[i].data; series[k]['data'] = val.series[i].data;
k++ k++
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
} }
// xXlabel
let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },

@ -144,18 +144,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -405,6 +393,30 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// xXlabel
const wordNum = parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -487,6 +499,34 @@ export default {
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
// xXlabel
let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

@ -515,7 +515,11 @@ export default {
} }
} }
// xXlabel // xXlabel
const wordNum = parseInt((this.optionsStyle.width / val.xAxis.length) / optionsSetup.fontSizeX); let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = { const axisLabel = {
show: true, show: true,
interval: optionsSetup.textInterval, interval: optionsSetup.textInterval,

@ -17,7 +17,6 @@ export default {
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
flagInter: null,
widgetIndex: { widgetIndex: {
type: Number, type: Number,
default: 0, default: 0,
@ -228,18 +227,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -457,6 +444,30 @@ export default {
if (series[0].type == "bar") { if (series[0].type == "bar") {
series[0].data = data; series[0].data = data;
} }
// xXlabel
const wordNum = parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
}, },
// //
dynamicDataFn(refreshTime) { dynamicDataFn(refreshTime) {
@ -492,14 +503,38 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// series
const series = this.options.series; const series = this.options.series;
for (const i in series) { if (series[0].type == "bar") {
if (series[i].type == "bar") { series[0].data = val.series[0].data;
series[i].data = val.series[i].data; }
// xXlabel
let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
} }
} }
this.options.xAxis.axisLabel = axisLabel;
}, },
}, },
}; };

@ -179,18 +179,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -505,6 +493,30 @@ export default {
}, },
}); });
} }
// xXlabel
const wordNum = parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.xAxis.data = xAxisList; this.options.xAxis.data = xAxisList;
this.options.yAxis.data = []; this.options.yAxis.data = [];
@ -611,6 +623,34 @@ export default {
}, },
}); });
} }
// xXlabel
let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

@ -13,7 +13,6 @@ export default {
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
flagInter: null,
}, },
data() { data() {
return { return {
@ -187,18 +186,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -482,6 +469,31 @@ export default {
const legendName = []; const legendName = [];
legendName.push("bar"); legendName.push("bar");
legendName.push("line"); legendName.push("line");
const optionsSetup = this.optionsSetup;
// xXlabel
const wordNum = parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -515,6 +527,35 @@ export default {
} }
} }
} }
const optionsSetup = this.optionsSetup;
// xXlabel
let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },

@ -14,7 +14,6 @@ export default {
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
flagInter: null,
}, },
data() { data() {
return { return {
@ -246,18 +245,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -540,6 +527,30 @@ export default {
series[0].data = bar1; series[0].data = bar1;
series[1].data = bar2; series[1].data = bar2;
series[2].data = line; series[2].data = line;
// xXlabel
const wordNum = parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -635,6 +646,34 @@ export default {
series.push(obj); series.push(obj);
} }
} }
// xXlabel
let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

@ -144,18 +144,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -417,6 +405,30 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// xXlabel
const wordNum = parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -495,6 +507,34 @@ export default {
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
// xXlabel
let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

@ -158,18 +158,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -367,10 +355,34 @@ export default {
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}' formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
}; };
series[i].data = data; series[i].data = data;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
} }
} }
// xXlabel
const wordNum = parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -441,6 +453,34 @@ export default {
series.push(obj); series.push(obj);
} }
} }
// xXlabel
let xAxisDataLength = 1;
if (val.length !== 0){
xAxisDataLength = val.xAxis.length;
}
const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % wordNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

Loading…
Cancel
Save