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

折线对比图

Browse Source
qianming 4 years ago
parent 893f623fbe
commit 22f31ae9ca
2 changed files with 337 additions and 295 deletions
Show Stats Download Patch File Download Diff File

118
report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js
Unescape Escape View File

@ -31,27 +31,59 @@ export const widgetLineCompare = {
value: '' value: ''
}, },
[ [
/*{ {
name: '柱体设置', name: '折线设置',
list: [ list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{ {
type: 'el-slider', type: 'el-slider',
label: '最大宽度', label: '点大小',
name: 'maxWidth', name: 'pointSize',
required: false, required: false,
placeholder: '', placeholder: '',
value: 15, value: 10,
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
}, },
{ {
type: 'el-slider', type: 'el-slider',
label: '圆角', label: '面积厚度',
name: 'radius', name: 'areaThickness',
require: false, required: false,
placeholder: '', placeholder: '',
value: 5, value: 5,
}, },
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 4,
},
], ],
},*/ },
{ {
name: '标题设置', name: '标题设置',
list: [ list: [
@ -117,12 +149,12 @@ export const widgetLineCompare = {
], ],
}, },
{ {
name: '左X轴设置', name: 'X轴设置',
list: [ list: [
{ {
type: 'el-switch', type: 'el-switch',
label: '显示', label: '显示',
name: 'hideXLeft', name: 'isShowX',
required: false, required: false,
placeholder: '', placeholder: '',
value: true, value: true,
@ -130,15 +162,23 @@ export const widgetLineCompare = {
{ {
type: 'el-input-number', type: 'el-input-number',
label: '数值间隔', label: '数值间隔',
name: 'splitNumberLeft', name: 'splitNumberX',
required: false, required: false,
placeholder: '', placeholder: '',
value: '' value: ''
}, },
{
type: 'el-switch',
label: '数值居中',
name: 'boundaryX',
required: false,
placeholder: '',
value: true,
},
{ {
type: 'vue-color', type: 'vue-color',
label: '数值颜色', label: '数值颜色',
name: 'XcolorLeft', name: 'colorX',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff', value: '#fff',
@ -146,7 +186,7 @@ export const widgetLineCompare = {
{ {
type: 'el-input-number', type: 'el-input-number',
label: '数值字号', label: '数值字号',
name: 'fontSizeXLeft', name: 'fontSizeX',
required: false, required: false,
placeholder: '', placeholder: '',
value: 14, value: 14,
@ -154,68 +194,36 @@ export const widgetLineCompare = {
{ {
type: 'el-switch', type: 'el-switch',
label: '刻度线', label: '刻度线',
name: 'tickLineLeft', name: 'tickLineX',
require: false, require: false,
placeholder: '', placeholder: '',
value: false, value: true,
}, },
{ {
type: 'el-switch', type: 'el-switch',
label: 'X轴线', label: 'X轴线',
name: 'xLineLeft', name: 'lineX',
require: false, require: false,
placeholder: '', placeholder: '',
value: false, value: true,
}, },
{ {
type: 'vue-color', type: 'vue-color',
label: '轴颜色', label: '轴颜色',
name: 'lineColorXLeft', name: 'lineColorX',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff', value: '#fff',
}, },
{
type: 'el-switch',
label: '竖分割线',
name: 'SplitLineLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'SplitLineColorLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'SplitLinefontSizeLeft',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '边框线',
name: 'frameLineLeft',
require: false,
placeholder: '',
value: false,
},
], ],
}, },
{ {
name: '右X轴设置', name: '上y轴设置',
list: [ list: [
{ {
type: 'el-switch', type: 'el-switch',
label: '显示', label: '显示',
name: 'hideXRight', name: 'isShowYTop',
required: false, required: false,
placeholder: '', placeholder: '',
value: true, value: true,
@ -223,7 +231,7 @@ export const widgetLineCompare = {
{ {
type: 'el-input-number', type: 'el-input-number',
label: '数值间隔', label: '数值间隔',
name: 'splitNumberRight', name: 'splitNumberYTop',
required: false, required: false,
placeholder: '', placeholder: '',
value: '' value: ''
@ -303,7 +311,7 @@ export const widgetLineCompare = {
], ],
}, },
{ {
name: 'Y轴设置', name: '下Y轴设置',
list: [ list: [
{ {
type: 'el-switch', type: 'el-switch',

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

@ -29,13 +29,24 @@ export default {
}, },
tooltip: { tooltip: {
show: true, show: true,
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "line", type: 'line',
lineStyle: { lineStyle: {
type: "dashed", color: 'ffffff',
type: 'dashed',
}, },
}, },
/*axisPointer: {
type: 'cross',
lineStyle: {
color: 'ffffff',
type: 'dashed',
},
crossStyle: {
color: 'ffffff',
}
},*/
}, },
//边距 //边距
grid: [ grid: [
@ -65,6 +76,7 @@ export default {
xAxis: [ xAxis: [
{// {//
gridIndex: 0, gridIndex: 0,
show: true,
type: 'category', type: 'category',
boundaryGap: true, // 居中 boundaryGap: true, // 居中
axisLine: { //x轴线 axisLine: { //x轴线
@ -79,6 +91,7 @@ export default {
axisLabel: { // X轴数据 axisLabel: { // X轴数据
show: true, show: true,
textStyle: { textStyle: {
interval: 0,
color: '#ffffff', color: '#ffffff',
fontSize: 14 fontSize: 14
} }
@ -87,6 +100,7 @@ export default {
}, },
{// {//
gridIndex: 1, gridIndex: 1,
show: true,
type: 'category', type: 'category',
position: 'top', position: 'top',
boundaryGap: true, // 居中 boundaryGap: true, // 居中
@ -101,6 +115,7 @@ export default {
}, },
axisLabel: { axisLabel: {
show: false, show: false,
interval: 0,
}, },
data: [], data: [],
}, },
@ -129,6 +144,9 @@ export default {
color: '#ffffff', color: '#ffffff',
}, },
}, },
axisPointer: {
snap: true
},
}, },
{ {
gridIndex: 1, gridIndex: 1,
@ -153,6 +171,9 @@ export default {
color: '#ffffff', color: '#ffffff',
}, },
}, },
axisPointer: {
snap: true
},
}, },
], ],
series: [ series: [
@ -242,260 +263,274 @@ export default {
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions() {
/*this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsXLeft(); this.setOptionsX();
this.setOptionsXRight(); // this.setOptionsXRight();
this.setOptionsY(); // this.setOptionsY();
this.setOptionsTop(); // this.setOptionsTop();
this.setOptionsTooltip(); // this.setOptionsTooltip();
this.setOptionsGrid(); // this.setOptionsGrid();
this.setOptionsLegend(); // this.setOptionsLegend();
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轴设置 // X轴设置
setOptionsXLeft() { setOptionsX() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const xAxisLeft = { const xAxis0 = {
splitNumber: optionsSetup.splitNumberLeft, gridIndex: 0,
type: 'value', show: optionsSetup.isShowX,
inverse: true, type: 'category',
axisLine: {//X轴线 boundaryGap: optionsSetup.boundaryX, // 值居中
show: optionsSetup.xLineLeft, axisLine: { //x轴线
lineStyle: { show: optionsSetup.lineX,
color: optionsSetup.lineColorXLeft, lineStyle: {
}, color: optionsSetup.lineColorX,
},
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;
}, },
// 右X轴设置 axisTick: { // 刻度
setOptionsXRight() { show: optionsSetup.tickLineX,
const optionsSetup = this.optionsSetup;
const xAxisRight = {
gridIndex: 2,
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;
}, },
// Y轴设置 axisLabel: { // X轴数据
setOptionsY() { show: true,
const optionsSetup = this.optionsSetup; interval: optionsSetup.splitNumberX,
const axisLine = { textStyle: {
show: optionsSetup.lineY, color: optionsSetup.colorX,
lineStyle: { fontSize: optionsSetup.fontSizeX
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;
}, },
// 数值设定、柱体设置 }
setOptionsTop() { const xAxis1 = {
const optionsSetup = this.optionsSetup; gridIndex: 1,
const series = this.options.series; show: optionsSetup.isShowX,
for (const key in series) { type: 'category',
if (series[key].type == "bar") { position: 'top',
series[0].label = { boundaryGap: optionsSetup.boundaryX, // 值居中
normal: { axisLine: { // x轴线
show: optionsSetup.isShow, show: optionsSetup.lineX,
position: 'insideLeft', lineStyle: {
textStyle: { color: optionsSetup.lineColorX,
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 提示语设置 axisTick: { // 刻度
setOptionsTooltip() { show: optionsSetup.tickLineX,
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
}
};
this.options.tooltip = tooltip;
}, },
// 边距设置 axisLabel: {
getOptionsBottom(){ show: false,
const optionsSetup = this.optionsSetup; interval: optionsSetup.splitNumberX,
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; this.options.xAxis[0] = xAxis0;
const grid = [ this.options.xAxis[1] = xAxis1;
{//左 },
show: optionsSetup.frameLineLeft, // 右X轴设置
left: optionsSetup.marginLeftRight, setOptionsXRight() {
top: optionsSetup.marginTop, const optionsSetup = this.optionsSetup;
bottom: optionsSetup.marginBottom, const xAxisRight = {
containLabel: true, gridIndex: 2,
width: '40%' splitNumber: optionsSetup.splitNumberRight,
}, type: 'value',
{//中间字体位置 axisLine: {//X轴线
show: false, show: optionsSetup.xLineRight,
left: "51%", lineStyle: {
top: optionsSetup.marginTop, color: optionsSetup.lineColorXRight,
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;
}, },
// 图例操作 axisTick: {
setOptionsLegend() { show: optionsSetup.tickLineRight,
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;
}, },
// 颜色修改、圆角修改 position: 'bottom',
setOptionsColor() { axisLabel: { // x轴
const optionsSetup = this.optionsSetup; show: optionsSetup.hideXRight,
const customColor = optionsSetup.customColor; textStyle: {
if (!customColor) return; color: optionsSetup.XcolorRight,
const itemStyleLeft = { fontSize: optionsSetup.fontSizeXRight
normal: {
color: customColor[0].color,
barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius]
},
emphasis: {
show: false,
},
} }
const itemStyleRight = { },
splitLine: { // 分割线
show: optionsSetup.SplitLineRight,
lineStyle: {
color: optionsSetup.SplitLineColorRight,
width: optionsSetup.SplitLinefontSizeRight,
type: 'solid'
}
}
}
this.options.xAxis[2] = xAxisRight;
},
// Y轴设置
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;
},
// 数值设定、柱体设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[0].label = {
normal: { normal: {
color: customColor[1].color, show: optionsSetup.isShow,
barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0] position: 'insideLeft',
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
}
}, },
emphasis: { emphasis: {
show: false, show: false,
}, },
} },
this.options.series[0].itemStyle = itemStyleLeft; series[1].label = {
this.options.series[1].itemStyle = itemStyleRight; 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;
},
// 边距设置
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 = {
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;
@ -544,7 +579,6 @@ export default {
data: data data: data
}) })
} }
console.log(arrayList)
this.options.series[0]['name'] = arrayList[0].name this.options.series[0]['name'] = arrayList[0].name
this.options.series[0]['data'] = arrayList[0].data this.options.series[0]['data'] = arrayList[0].data
this.options.series[1]['name'] = arrayList[1].name this.options.series[1]['name'] = arrayList[1].name

Write Preview
Loading…
Cancel
Save