ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

折线对比图

Browse Source
qianming 4 years ago
parent 335645c370
commit 893f623fbe
3 changed files with 338 additions and 315 deletions
Show Stats Download Patch File Download Diff File

20
report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue
Unescape Escape View File

@ -61,6 +61,7 @@ export default {
xAxis: [ xAxis: [
{// 左 {// 左
splitNumber: 2, splitNumber: 2,
show: true,
type: 'value', type: 'value',
inverse: true, inverse: true,
axisLine: {//底分割线 axisLine: {//底分割线
@ -92,6 +93,7 @@ export default {
}, },
{// 右 {// 右
gridIndex: 2, gridIndex: 2,
show: true,
type: 'value', type: 'value',
axisLine: { axisLine: {
show: false, show: false,
@ -302,6 +304,7 @@ export default {
const xAxisLeft = { const xAxisLeft = {
splitNumber: optionsSetup.splitNumberLeft, splitNumber: optionsSetup.splitNumberLeft,
type: 'value', type: 'value',
show : optionsSetup.hideXLeft,
inverse: true, inverse: true,
axisLine: {//X轴线 axisLine: {//X轴线
show: optionsSetup.xLineLeft, show: optionsSetup.xLineLeft,
@ -314,7 +317,7 @@ export default {
}, },
position: 'bottom', position: 'bottom',
axisLabel: { // x轴 axisLabel: { // x轴
show: optionsSetup.hideXLeft, show: true,
textStyle: { textStyle: {
color: optionsSetup.XcolorLeft, color: optionsSetup.XcolorLeft,
fontSize: optionsSetup.fontSizeXLeft fontSize: optionsSetup.fontSizeXLeft
@ -337,6 +340,7 @@ export default {
const xAxisRight = { const xAxisRight = {
gridIndex: 2, gridIndex: 2,
splitNumber: optionsSetup.splitNumberRight, splitNumber: optionsSetup.splitNumberRight,
show : optionsSetup.hideXRight,
type: 'value', type: 'value',
axisLine: {//X轴线 axisLine: {//X轴线
show: optionsSetup.xLineRight, show: optionsSetup.xLineRight,
@ -349,7 +353,7 @@ export default {
}, },
position: 'bottom', position: 'bottom',
axisLabel: { // x轴 axisLabel: { // x轴
show: optionsSetup.hideXRight, show: true,
textStyle: { textStyle: {
color: optionsSetup.XcolorRight, color: optionsSetup.XcolorRight,
fontSize: optionsSetup.fontSizeXRight fontSize: optionsSetup.fontSizeXRight
@ -444,16 +448,6 @@ 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 = [
@ -469,7 +463,7 @@ export default {
show: false, show: false,
left: "51%", left: "51%",
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
bottom: this.getOptionsBottom(), bottom: optionsSetup.marginBottom + 15,
width: '0%' width: '0%'
}, },
{//右 {//右

631
report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue
Unescape Escape View File

@ -16,13 +16,27 @@ export default {
data() { data() {
return { return {
options: { options: {
axisPointer: {
link: {
xAxisIndex: "all",
},
},
title: { title: {
//text: '柱状对比图',
x: 'center', x: 'center',
textStyle: { textStyle: {
color: '#ffffff', color: '#ffffff',
}, },
}, },
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
type: "dashed",
},
},
},
//边距 //边距
grid: [ grid: [
{// 上 {// 上
@ -52,60 +66,92 @@ export default {
{// {//
gridIndex: 0, gridIndex: 0,
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: true, // 居中
axisLine: { //分割线 axisLine: { //x轴线
onZero: false, show: true,
lineStyle: {
color: '#ffffff',
}
}, },
splitNumber: 2, axisTick: { // 刻度
inverse: true, show: true,
axisTick: {
show: false,
}, },
//position: 'bottom', axisLabel: { // X轴数据
axisLabel: { // x轴
show: true, show: true,
textStyle: { textStyle: {
color: '#ffffff', color: '#ffffff',
fontSize: 12 fontSize: 14
} }
}, },
data: [] data: [],
}, },
{// {//
gridIndex: 1, gridIndex: 1,
type: 'category', type: 'category',
position: 'top', position: 'top',
boundaryGap: false, boundaryGap: true, // 居中
axisLine: { axisLine: { // x轴线
show: false, show: true,
lineStyle: {
color: '#ffffff',
}
}, },
axisTick: { axisTick: { // 刻度
show: false, show: true,
}, },
//position: 'bottom',
axisLabel: { axisLabel: {
show: true, show: false,
textStyle: {
color: '#ffffff',
fontSize: 12,
},
}, },
data: [],
}, },
], ],
yAxis: [ yAxis: [
{ {
gridIndex: 0, gridIndex: 0,
scale: true, show: true,
scale: true, // 是否不从0开始,false从0开始
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
fontSize: 14,
},
},
axisLine: { // 轴线
show: true,
lineStyle: {
color: '#ffffff',
},
},
splitLine: { splitLine: {
show: false, show: false,
lineStyle: {
color: '#ffffff',
},
}, },
}, },
{ {
gridIndex: 1, gridIndex: 1,
scale: true, scale: false, // 是否从0开始
inverse: true, inverse: true, // 翻转
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
fontSize: 14,
},
},
axisLine: { // 轴线
show: true,
lineStyle: {
color: '#ffffff',
},
},
splitLine: { splitLine: {
show: false, show: false,
lineStyle: {
color: '#ffffff',
},
}, },
}, },
], ],
@ -115,32 +161,21 @@ export default {
type: 'line', type: 'line',
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
smooth: true, smooth: true, // 曲线，折线
barGap: 20,
barWidth: 15,
/*label: {
normal: {
show: true,
color: 'red',
position: 'insideLeft',
textStyle: {
color: '#ffffff',
}
},
emphasis: {
show: false,
},
},
itemStyle: { itemStyle: {
normal: { color: '#36c5e7',
color: '#36c5e7', },
barBorderRadius: [8, 0, 0, 8], lineStyle: {
}, color: '#36c5e7',
emphasis: { width: 2,
show: false, },
}, label: {
},*/ position: 'top',
distance: 10,
show: true,
color: '#36c5e7',
fontSize: 14,
},
data: [], data: [],
}, },
{ {
@ -148,28 +183,21 @@ export default {
type: 'line', type: 'line',
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
smooth: true, smooth: true, // 曲线，折线
barGap: 20,
barWidth: 15,
/*label: {
normal: {
show: true,
color: 'red',
position: 'insideRight',
textStyle: {
color: '#ffffff',
}
},
},
itemStyle: { itemStyle: {
normal: { color: '#e68b55',
color: '#e68b55', },
barBorderRadius: [0, 8, 8, 0], lineStyle: {
}, color: '#e68b55',
emphasis: { width: 2,
show: false, },
}, label: {
},*/ position: 'bottom',
distance: 10,
show: true,
color: '#e68b55',
fontSize: 16,
},
data: [], data: [],
}, },
] ]
@ -225,249 +253,249 @@ export default {
this.setOptionsColor();*/ this.setOptionsColor();*/
this.setOptionsData(); this.setOptionsData();
}, },
/* // 标题修改 /* // 标题修改
setOptionsTitle() { setOptionsTitle() {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const title = {}; const title = {};
title.text = optionsCollapse.titleText; title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle; title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign; title.left = optionsCollapse.textAlign;
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight fontWeight: optionsCollapse.textFontWeight
}; };
this.options.title = title; this.options.title = title;
},
// 左X轴设置
setOptionsXLeft() {
const optionsSetup = this.optionsSetup;
const xAxisLeft = {
splitNumber: optionsSetup.splitNumberLeft,
type: 'value',
inverse: true,
axisLine: {//X轴线
show: optionsSetup.xLineLeft,
lineStyle: {
color: optionsSetup.lineColorXLeft,
},
},
axisTick: {
show: optionsSetup.tickLineLeft,
}, },
position: 'bottom', // 左X轴设置
axisLabel: { // x轴 setOptionsXLeft() {
show: optionsSetup.hideXLeft, const optionsSetup = this.optionsSetup;
textStyle: { const xAxisLeft = {
color: optionsSetup.XcolorLeft, splitNumber: optionsSetup.splitNumberLeft,
fontSize: optionsSetup.fontSizeXLeft type: 'value',
inverse: true,
axisLine: {//X轴线
show: optionsSetup.xLineLeft,
lineStyle: {
color: optionsSetup.lineColorXLeft,
},
},
axisTick: {
show: optionsSetup.tickLineLeft,
},
position: 'bottom',
axisLabel: { // x轴
show: optionsSetup.hideXLeft,
textStyle: {
color: optionsSetup.XcolorLeft,
fontSize: optionsSetup.fontSizeXLeft
}
},
splitLine: { // 分割线
show: optionsSetup.SplitLineLeft,
lineStyle: {
color: optionsSetup.SplitLineColorLeft,
width: optionsSetup.SplitLinefontSizeLeft,
type: 'solid'
}
}
} }
this.options.xAxis[0] = xAxisLeft;
}, },
splitLine: { // 分割线 // 右X轴设置
show: optionsSetup.SplitLineLeft, setOptionsXRight() {
lineStyle: { const optionsSetup = this.optionsSetup;
color: optionsSetup.SplitLineColorLeft, const xAxisRight = {
width: optionsSetup.SplitLinefontSizeLeft, gridIndex: 2,
type: 'solid' splitNumber: optionsSetup.splitNumberRight,
type: 'value',
axisLine: {//X轴线
show: optionsSetup.xLineRight,
lineStyle: {
color: optionsSetup.lineColorXRight,
},
},
axisTick: {
show: optionsSetup.tickLineRight,
},
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;
}
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: { // Y轴设置
show: optionsSetup.tickLineRight, setOptionsY() {
const optionsSetup = this.optionsSetup;
const axisLine = {
show: optionsSetup.lineY,
lineStyle: {
color: optionsSetup.lineColorY
}
};
const axisTick = {
show: optionsSetup.tickLineY
};
const axisLabel = {
show: optionsSetup.hideY,
textStyle: {
align: optionsSetup.textAlign,
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY,
}
};
this.options.yAxis[1]['axisLine'] = axisLine;
this.options.yAxis[1]['axisTick'] = axisTick;
this.options.yAxis[1]['axisLabel'] = axisLabel;
}, },
position: 'bottom', // 数值设定、柱体设置
axisLabel: { // x轴 setOptionsTop() {
show: optionsSetup.hideXRight, const optionsSetup = this.optionsSetup;
textStyle: { const series = this.options.series;
color: optionsSetup.XcolorRight, for (const key in series) {
fontSize: optionsSetup.fontSizeXRight 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;
}
} }
this.options.series = series;
},
// tooltip 提示语设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
}
};
this.options.tooltip = tooltip;
}, },
splitLine: { // 分割线 // 边距设置
show: optionsSetup.SplitLineRight, getOptionsBottom(){
lineStyle: { const optionsSetup = this.optionsSetup;
color: optionsSetup.SplitLineColorRight, let bottom = optionsSetup.marginBottom;
width: optionsSetup.SplitLinefontSizeRight, if (optionsSetup.hideXLeft) {
type: 'solid' bottom = optionsSetup.marginBottom + 15
}else if (optionsSetup.hideXRight){
bottom = optionsSetup.marginBottom + 15
} }
} return bottom
} },
this.options.xAxis[2] = xAxisRight; setOptionsGrid() {
}, const optionsSetup = this.optionsSetup;
// Y轴设置 const grid = [
setOptionsY() { {//左
const optionsSetup = this.optionsSetup; show: optionsSetup.frameLineLeft,
const axisLine = { left: optionsSetup.marginLeftRight,
show: optionsSetup.lineY, top: optionsSetup.marginTop,
lineStyle: { bottom: optionsSetup.marginBottom,
color: optionsSetup.lineColorY containLabel: true,
} width: '40%'
};
const axisTick = {
show: optionsSetup.tickLineY
};
const axisLabel = {
show: optionsSetup.hideY,
textStyle: {
align: optionsSetup.textAlign,
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY,
}
};
this.options.yAxis[1]['axisLine'] = axisLine;
this.options.yAxis[1]['axisTick'] = axisTick;
this.options.yAxis[1]['axisLabel'] = axisLabel;
},
// 数值设定、柱体设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
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, show: false,
left: "51%",
top: optionsSetup.marginTop,
bottom: this.getOptionsBottom(),
width: '0%'
}, },
}, {//右
series[1].label = { show: optionsSetup.frameLineRight,
normal: { right: optionsSetup.marginLeftRight,
show: optionsSetup.isShow, top: optionsSetup.marginTop,
color: 'red', bottom: optionsSetup.marginBottom,
position: 'insideRight', containLabel: true,
textStyle: { width: '40%'
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
}
},
emphasis: {
show: false,
},
}, },
series[key].barWidth = optionsSetup.maxWidth; ]
} this.options.grid = grid;
}
this.options.series = series;
},
// tooltip 提示语设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
}
};
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() {
const optionsSetup = this.optionsSetup;
const grid = [
{//左
show: optionsSetup.frameLineLeft,
left: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
containLabel: true,
width: '40%'
},
{//中间字体位置
show: false,
left: "51%",
top: optionsSetup.marginTop,
bottom: this.getOptionsBottom(),
width: '0%'
},
{//右
show: optionsSetup.frameLineRight,
right: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
containLabel: true,
width: '40%'
},
]
this.options.grid = grid;
},
// 图例操作
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
};
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 itemStyleRight = { setOptionsLegend() {
normal: { const optionsSetup = this.optionsSetup;
color: customColor[1].color, const legend = this.options.legend;
barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0] legend.show = optionsSetup.isShowLegend;
}, legend.left = optionsSetup.lateralPosition;
emphasis: { legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
show: false, legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
}, },
} // 颜色修改、圆角修改
this.options.series[0].itemStyle = itemStyleLeft; setOptionsColor() {
this.options.series[1].itemStyle = itemStyleRight; 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 itemStyleRight = {
normal: {
color: customColor[1].color,
barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
},
emphasis: {
show: false,
},
}
this.options.series[0].itemStyle = itemStyleLeft;
this.options.series[1].itemStyle = itemStyleRight;
},*/
// 数据解析 // 数据解析
setOptionsData() { setOptionsData() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -522,6 +550,7 @@ export default {
this.options.series[1]['name'] = arrayList[1].name this.options.series[1]['name'] = arrayList[1].name
this.options.series[1]['data'] = arrayList[1].data this.options.series[1]['data'] = arrayList[1].data
this.options.xAxis[0]['data'] = xAxisList this.options.xAxis[0]['data'] = xAxisList
this.options.xAxis[1]['data'] = xAxisList
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -543,7 +572,7 @@ export default {
}, },
renderingFn(optionsSetup, val) { renderingFn(optionsSetup, val) {
this.options.yAxis[1]['data'] = val.xAxis this.options.yAxis[1]['data'] = val.xAxis
if (val.series[0].type == "bar"){ if (val.series[0].type == "bar") {
this.options.series[0]['name'] = val.series[0].name this.options.series[0]['name'] = val.series[0].name
this.options.series[0]['data'] = val.series[0].data this.options.series[0]['data'] = val.series[0].data
this.options.series[1]['name'] = val.series[1].name this.options.series[1]['name'] = val.series[1].name

2
report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue
Unescape Escape View File

@ -180,7 +180,7 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: optionsCollapse.colorY, // x轴 坐标文字颜色 color: optionsCollapse.colorY, // y轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeY fontSize: optionsCollapse.fontSizeY
} }
}, },

Write Preview
Loading…
Cancel
Save