|
|
|
@ -33,18 +33,18 @@ export default {
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'line',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'ffffff',
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
/*axisPointer: {
|
|
|
|
|
type: 'cross',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'ffffff',
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
},
|
|
|
|
|
crossStyle: {
|
|
|
|
|
color: 'ffffff',
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
}
|
|
|
|
|
},*/
|
|
|
|
|
},
|
|
|
|
@ -182,6 +182,9 @@ export default {
|
|
|
|
|
type: 'line',
|
|
|
|
|
xAxisIndex: 0,
|
|
|
|
|
yAxisIndex: 0,
|
|
|
|
|
showSymbol: true,// 标记点
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
symbolSize: 5,
|
|
|
|
|
smooth: true, // 曲线,折线
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#36c5e7',
|
|
|
|
@ -190,7 +193,7 @@ export default {
|
|
|
|
|
color: '#36c5e7',
|
|
|
|
|
width: 2,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
label: { // 数值
|
|
|
|
|
position: 'top',
|
|
|
|
|
distance: 10,
|
|
|
|
|
show: true,
|
|
|
|
@ -204,6 +207,9 @@ export default {
|
|
|
|
|
type: 'line',
|
|
|
|
|
xAxisIndex: 1,
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
showSymbol: true,// 标记点
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
symbolSize: 5,
|
|
|
|
|
smooth: true, // 曲线,折线
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#e68b55',
|
|
|
|
@ -212,7 +218,7 @@ export default {
|
|
|
|
|
color: '#e68b55',
|
|
|
|
|
width: 2,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
label: {// 数值
|
|
|
|
|
position: 'bottom',
|
|
|
|
|
distance: 10,
|
|
|
|
|
show: true,
|
|
|
|
@ -267,11 +273,11 @@ export default {
|
|
|
|
|
this.setOptionsX();
|
|
|
|
|
this.setOptionsYTop();
|
|
|
|
|
this.setOptionsYBottom();
|
|
|
|
|
// this.setOptionsTop();
|
|
|
|
|
// this.setOptionsTooltip();
|
|
|
|
|
this.setOptionsTop();
|
|
|
|
|
this.setOptionsTooltip();
|
|
|
|
|
this.setOptionsGrid();
|
|
|
|
|
// this.setOptionsLegend();
|
|
|
|
|
// this.setOptionsColor();
|
|
|
|
|
this.setOptionsLegend();
|
|
|
|
|
this.setOptionsColor();
|
|
|
|
|
this.setOptionsData();
|
|
|
|
|
},
|
|
|
|
|
// 标题修改
|
|
|
|
@ -427,57 +433,77 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
this.options.yAxis[1] = yAxis
|
|
|
|
|
},
|
|
|
|
|
// 数值设定、柱体设置
|
|
|
|
|
// 数值设定 折线设置
|
|
|
|
|
setOptionsTop() {
|
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
|
const series = this.options.series;
|
|
|
|
|
const series = this.options.series
|
|
|
|
|
// 折线
|
|
|
|
|
for (const key in series) {
|
|
|
|
|
if (series[key].type == "bar") {
|
|
|
|
|
series[0].label = {
|
|
|
|
|
normal: {
|
|
|
|
|
show: optionsSetup.isShow,
|
|
|
|
|
position: 'insideLeft',
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: optionsSetup.fontSize,
|
|
|
|
|
color: optionsSetup.subTextColor,
|
|
|
|
|
fontWeight: optionsSetup.fontWeight
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series[1].label = {
|
|
|
|
|
normal: {
|
|
|
|
|
show: optionsSetup.isShow,
|
|
|
|
|
color: 'red',
|
|
|
|
|
position: 'insideRight',
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: optionsSetup.fontSize,
|
|
|
|
|
color: optionsSetup.subTextColor,
|
|
|
|
|
fontWeight: optionsSetup.fontWeight
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series[key].barWidth = optionsSetup.maxWidth;
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 数值
|
|
|
|
|
if (series[0].type == 'line') {
|
|
|
|
|
series[0].label = {
|
|
|
|
|
position: 'top',
|
|
|
|
|
distance: 10,
|
|
|
|
|
show: optionsSetup.isShow,
|
|
|
|
|
color: optionsSetup.subTextColor,
|
|
|
|
|
fontSize: optionsSetup.fontSize,
|
|
|
|
|
fontWeight: optionsSetup.fontWeight
|
|
|
|
|
}
|
|
|
|
|
series[1].label = {
|
|
|
|
|
position: 'bottom',
|
|
|
|
|
distance: 10,
|
|
|
|
|
show: optionsSetup.isShow,
|
|
|
|
|
color: optionsSetup.subTextColor,
|
|
|
|
|
fontSize: optionsSetup.fontSize,
|
|
|
|
|
fontWeight: optionsSetup.fontWeight
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.options.series = series;
|
|
|
|
|
},
|
|
|
|
|
// tooltip 提示语设置
|
|
|
|
|
setOptionsTooltip() {
|
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
|
const tooltip = {
|
|
|
|
|
trigger: "item",
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: optionsSetup.lineColor,
|
|
|
|
|
fontSize: optionsSetup.fontSize
|
|
|
|
|
let tooltip = {}
|
|
|
|
|
if (optionsSetup.tipType == "line") {
|
|
|
|
|
tooltip = {
|
|
|
|
|
show: optionsSetup.tipShow,
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: optionsSetup.tipType,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: optionsSetup.tipColor,
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
tooltip = {
|
|
|
|
|
show: optionsSetup.tipShow,
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: optionsSetup.tipType,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: optionsSetup.tipColor,
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
},
|
|
|
|
|
crossStyle: {
|
|
|
|
|
color: optionsSetup.tipColor,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.options.tooltip = tooltip;
|
|
|
|
|
},
|
|
|
|
|
// 边距设置
|
|
|
|
@ -517,31 +543,27 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
legend.itemWidth = optionsSetup.lengedWidth;
|
|
|
|
|
},
|
|
|
|
|
// 颜色修改、圆角修改
|
|
|
|
|
// 颜色修改、宽度修改
|
|
|
|
|
setOptionsColor() {
|
|
|
|
|
const optionsSetup = this.optionsSetup;
|
|
|
|
|
const customColor = optionsSetup.customColor;
|
|
|
|
|
if (!customColor) return;
|
|
|
|
|
const itemStyleLeft = {
|
|
|
|
|
normal: {
|
|
|
|
|
color: customColor[0].color,
|
|
|
|
|
barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius]
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
const series = this.options.series
|
|
|
|
|
const arrColor = [];
|
|
|
|
|
for (let i = 0; i < customColor.length; i++) {
|
|
|
|
|
arrColor.push(customColor[i].color);
|
|
|
|
|
}
|
|
|
|
|
const itemStyleRight = {
|
|
|
|
|
normal: {
|
|
|
|
|
color: customColor[1].color,
|
|
|
|
|
barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
if (!customColor) return;
|
|
|
|
|
for (const key in series) {
|
|
|
|
|
const itemStyle = {
|
|
|
|
|
color: arrColor[key],
|
|
|
|
|
}
|
|
|
|
|
const lineStyle = {
|
|
|
|
|
color: arrColor[key],
|
|
|
|
|
width: optionsSetup.lineWidth,
|
|
|
|
|
}
|
|
|
|
|
this.options.series[key].itemStyle = itemStyle
|
|
|
|
|
this.options.series[key].lineStyle = lineStyle
|
|
|
|
|
}
|
|
|
|
|
this.options.series[0].itemStyle = itemStyleLeft;
|
|
|
|
|
this.options.series[1].itemStyle = itemStyleRight;
|
|
|
|
|
},
|
|
|
|
|
// 数据解析
|
|
|
|
|
setOptionsData() {
|
|
|
|
|