|
|
|
@ -265,11 +265,11 @@ export default {
|
|
|
|
editorOptions() {
|
|
|
|
editorOptions() {
|
|
|
|
this.setOptionsTitle();
|
|
|
|
this.setOptionsTitle();
|
|
|
|
this.setOptionsX();
|
|
|
|
this.setOptionsX();
|
|
|
|
// this.setOptionsXRight();
|
|
|
|
this.setOptionsYTop();
|
|
|
|
// this.setOptionsY();
|
|
|
|
this.setOptionsYBottom();
|
|
|
|
// this.setOptionsTop();
|
|
|
|
// this.setOptionsTop();
|
|
|
|
// this.setOptionsTooltip();
|
|
|
|
// this.setOptionsTooltip();
|
|
|
|
// this.setOptionsGrid();
|
|
|
|
this.setOptionsGrid();
|
|
|
|
// this.setOptionsLegend();
|
|
|
|
// this.setOptionsLegend();
|
|
|
|
// this.setOptionsColor();
|
|
|
|
// this.setOptionsColor();
|
|
|
|
this.setOptionsData();
|
|
|
|
this.setOptionsData();
|
|
|
|
@ -294,6 +294,11 @@ export default {
|
|
|
|
const xAxis0 = {
|
|
|
|
const xAxis0 = {
|
|
|
|
gridIndex: 0,
|
|
|
|
gridIndex: 0,
|
|
|
|
show: optionsSetup.isShowX,
|
|
|
|
show: optionsSetup.isShowX,
|
|
|
|
|
|
|
|
name: optionsSetup.xName, // 坐标轴名称
|
|
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
|
|
color: optionsSetup.nameColorX,
|
|
|
|
|
|
|
|
fontSize: optionsSetup.nameFontSizeX
|
|
|
|
|
|
|
|
},
|
|
|
|
type: 'category',
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: optionsSetup.boundaryX, // 值居中
|
|
|
|
boundaryGap: optionsSetup.boundaryX, // 值居中
|
|
|
|
axisLine: { //x轴线
|
|
|
|
axisLine: { //x轴线
|
|
|
|
@ -337,64 +342,90 @@ export default {
|
|
|
|
this.options.xAxis[0] = xAxis0;
|
|
|
|
this.options.xAxis[0] = xAxis0;
|
|
|
|
this.options.xAxis[1] = xAxis1;
|
|
|
|
this.options.xAxis[1] = xAxis1;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 右X轴设置
|
|
|
|
// 上y轴设置
|
|
|
|
setOptionsXRight() {
|
|
|
|
setOptionsYTop() {
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const xAxisRight = {
|
|
|
|
const yAxis = {
|
|
|
|
gridIndex: 2,
|
|
|
|
gridIndex: 0,
|
|
|
|
splitNumber: optionsSetup.splitNumberRight,
|
|
|
|
splitNumber: optionsSetup.splitNumberYTop,
|
|
|
|
type: 'value',
|
|
|
|
show: optionsSetup.isShowYTop,
|
|
|
|
axisLine: {//X轴线
|
|
|
|
scale: optionsSetup.scaleYTop, // 缩放
|
|
|
|
show: optionsSetup.xLineRight,
|
|
|
|
name: optionsSetup.textNameYTop, // 坐标轴名称
|
|
|
|
lineStyle: {
|
|
|
|
nameTextStyle: {
|
|
|
|
color: optionsSetup.lineColorXRight,
|
|
|
|
color: optionsSetup.nameColorYTop,
|
|
|
|
|
|
|
|
fontSize: optionsSetup.namefontSizeYTop
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: optionsSetup.colorYTop,
|
|
|
|
|
|
|
|
fontSize: optionsSetup.fontSizeYTop,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
axisTick: { // 刻度
|
|
|
|
show: optionsSetup.tickLineRight,
|
|
|
|
show: optionsSetup.tickLineYTop,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
position: 'bottom',
|
|
|
|
axisLine: { // 轴线
|
|
|
|
axisLabel: { // x轴
|
|
|
|
show: optionsSetup.lineYTop,
|
|
|
|
show: optionsSetup.hideXRight,
|
|
|
|
lineStyle: {
|
|
|
|
textStyle: {
|
|
|
|
color: optionsSetup.lineColorYTop,
|
|
|
|
color: optionsSetup.XcolorRight,
|
|
|
|
},
|
|
|
|
fontSize: optionsSetup.fontSizeXRight
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
splitLine: { // 分割线
|
|
|
|
splitLine: {
|
|
|
|
show: optionsSetup.SplitLineRight,
|
|
|
|
show: optionsSetup.splitLineYTop,
|
|
|
|
lineStyle: {
|
|
|
|
lineStyle: {
|
|
|
|
color: optionsSetup.SplitLineColorRight,
|
|
|
|
width: optionsSetup.splitLinefontSizeYTop,
|
|
|
|
width: optionsSetup.SplitLinefontSizeRight,
|
|
|
|
color: optionsSetup.splitLineColorYTop,
|
|
|
|
type: 'solid'
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
axisPointer: {
|
|
|
|
|
|
|
|
snap: true
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.options.xAxis[2] = xAxisRight;
|
|
|
|
this.options.yAxis[0] = yAxis
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// Y轴设置
|
|
|
|
// 下Y轴设置
|
|
|
|
setOptionsY() {
|
|
|
|
setOptionsYBottom() {
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const axisLine = {
|
|
|
|
const yAxis = {
|
|
|
|
show: optionsSetup.lineY,
|
|
|
|
gridIndex: 1,
|
|
|
|
lineStyle: {
|
|
|
|
splitNumber: optionsSetup.splitNumberYBottom,
|
|
|
|
color: optionsSetup.lineColorY
|
|
|
|
show: optionsSetup.isShowYBottom,
|
|
|
|
}
|
|
|
|
scale: optionsSetup.scaleYBottom, // 缩放
|
|
|
|
};
|
|
|
|
name: optionsSetup.textNameYBottom, // 坐标轴名称
|
|
|
|
const axisTick = {
|
|
|
|
nameTextStyle: {
|
|
|
|
show: optionsSetup.tickLineY
|
|
|
|
color: optionsSetup.nameColorYBottom,
|
|
|
|
};
|
|
|
|
fontSize: optionsSetup.namefontSizeYBottom
|
|
|
|
const axisLabel = {
|
|
|
|
},
|
|
|
|
show: optionsSetup.hideY,
|
|
|
|
inverse: true, // 翻转
|
|
|
|
textStyle: {
|
|
|
|
axisLabel: {
|
|
|
|
align: optionsSetup.textAlign,
|
|
|
|
show: true,
|
|
|
|
color: optionsSetup.colorY,
|
|
|
|
textStyle: {
|
|
|
|
fontSize: optionsSetup.fontSizeY,
|
|
|
|
color: optionsSetup.colorYBottom,
|
|
|
|
}
|
|
|
|
fontSize: optionsSetup.fontSizeYBottom,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
this.options.yAxis[1]['axisLine'] = axisLine;
|
|
|
|
},
|
|
|
|
this.options.yAxis[1]['axisTick'] = axisTick;
|
|
|
|
axisTick: { // 刻度
|
|
|
|
this.options.yAxis[1]['axisLabel'] = axisLabel;
|
|
|
|
show: optionsSetup.tickLineYBottom,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLine: { // 轴线
|
|
|
|
|
|
|
|
show: optionsSetup.lineYBottom,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
color: optionsSetup.lineColorYBottom,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
|
|
show: optionsSetup.splitLineYBottom,
|
|
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
|
|
width: optionsSetup.splitLinefontSizeYBottom,
|
|
|
|
|
|
|
|
color: optionsSetup.splitLineColorYBottom,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
|
|
snap: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.options.yAxis[1] = yAxis
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 数值设定、柱体设置
|
|
|
|
// 数值设定、柱体设置
|
|
|
|
setOptionsTop() {
|
|
|
|
setOptionsTop() {
|
|
|
|
@ -450,41 +481,22 @@ export default {
|
|
|
|
this.options.tooltip = tooltip;
|
|
|
|
this.options.tooltip = tooltip;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 边距设置
|
|
|
|
// 边距设置
|
|
|
|
getOptionsBottom() {
|
|
|
|
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
|
|
|
|
let bottom = optionsSetup.marginBottom;
|
|
|
|
|
|
|
|
if (optionsSetup.hideXLeft) {
|
|
|
|
|
|
|
|
bottom = optionsSetup.marginBottom + 15
|
|
|
|
|
|
|
|
} else if (optionsSetup.hideXRight) {
|
|
|
|
|
|
|
|
bottom = optionsSetup.marginBottom + 15
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return bottom
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
setOptionsGrid() {
|
|
|
|
setOptionsGrid() {
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
const grid = [
|
|
|
|
const grid = [
|
|
|
|
{//左
|
|
|
|
{// 上
|
|
|
|
show: optionsSetup.frameLineLeft,
|
|
|
|
left: optionsSetup.marginLeft,
|
|
|
|
left: optionsSetup.marginLeftRight,
|
|
|
|
right: optionsSetup.marginRight,
|
|
|
|
top: optionsSetup.marginTop,
|
|
|
|
top: optionsSetup.marginTop,
|
|
|
|
bottom: optionsSetup.marginBottom,
|
|
|
|
|
|
|
|
containLabel: true,
|
|
|
|
containLabel: true,
|
|
|
|
width: '40%'
|
|
|
|
bottom: '50%',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{//中间字体位置
|
|
|
|
{ // 下
|
|
|
|
show: false,
|
|
|
|
left: optionsSetup.marginLeft,
|
|
|
|
left: "51%",
|
|
|
|
right: optionsSetup.marginRight,
|
|
|
|
top: optionsSetup.marginTop,
|
|
|
|
|
|
|
|
bottom: this.getOptionsBottom(),
|
|
|
|
|
|
|
|
width: '0%'
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{//右
|
|
|
|
|
|
|
|
show: optionsSetup.frameLineRight,
|
|
|
|
|
|
|
|
right: optionsSetup.marginLeftRight,
|
|
|
|
|
|
|
|
top: optionsSetup.marginTop,
|
|
|
|
|
|
|
|
bottom: optionsSetup.marginBottom,
|
|
|
|
|
|
|
|
containLabel: true,
|
|
|
|
containLabel: true,
|
|
|
|
width: '40%'
|
|
|
|
top: '51%',
|
|
|
|
|
|
|
|
bottom: optionsSetup.marginBottom,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]
|
|
|
|
]
|
|
|
|
this.options.grid = grid;
|
|
|
|
this.options.grid = grid;
|
|
|
|
|
qianming
4 years ago