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

静态数据调整

Browse Source
qianming 3 years ago
parent 3a5137a569
commit 508e3c86b5
4 changed files with 779 additions and 843 deletions
Show Stats Download Patch File Download Diff File

91
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js
Unescape Escape View File

@ -590,80 +590,6 @@ export const widgetBarlinechart = {
}, },
], ],
}, },
/*{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},*/
{ {
name: '自定义配色', name: '自定义配色',
list: [ list: [
@ -715,7 +641,20 @@ export const widgetBarlinechart = {
placeholder: '', placeholder: '',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]}, value: [
{"axis": "1月", "bar": 2.6, "line": 2},
{"axis": "2月", "bar": 5.9, "line": 2.2},
{"axis": "3月", "bar": 9, "line": 3.3},
{"axis": "4月", "bar": 26.4, "line": 4.5},
{"axis": "5月", "bar": 28.7, "line": 6.3},
{"axis": "6月", "bar": 70.7, "line": 10.2},
{"axis": "7月", "bar": 175.6, "line": 20.3},
{"axis": "8月", "bar": 182.2, "line": 23.4},
{"axis": "9月", "bar": 48.7, "line": 23},
{"axis": "10月", "bar": 18.8, "line": 16.5},
{"axis": "11月", "bar": 6, "line": 12},
{"axis": "12月", "bar": 2.3, "line": 6.2},
]
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -765,4 +704,4 @@ export const widgetBarlinechart = {
}, },
], ],
} }
} }

190
report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue → report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue
Unescape Escape View File

@ -143,57 +143,57 @@ export default {
}, },
// 标题修改 // 标题修改
setOptionsTitle() { setOptionsTitle() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const title = {}; const title = {};
title.text = optionsCollapse.titleText; title.text = optionsSetup.titleText;
title.show = optionsCollapse.isNoTitle; title.show = optionsSetup.isNoTitle;
title.left = optionsCollapse.textAlign; title.left = optionsSetup.textAlign;
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsSetup.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsSetup.textFontSize,
fontWeight: optionsCollapse.textFontWeight fontWeight: optionsSetup.textFontWeight
}; };
title.subtext = optionsCollapse.subText; title.subtext = optionsSetup.subText;
title.subtextStyle = { title.subtextStyle = {
color: optionsCollapse.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight, fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize fontSize: optionsSetup.subTextFontSize
}; };
this.options.title = title; this.options.title = title;
}, },
// X轴设置 // X轴设置
setOptionsX() { setOptionsX() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const xAxis = { const xAxis = {
type: "category", type: "category",
show: optionsCollapse.hideX, // 坐标轴是否显示 show: optionsSetup.hideX, // 坐标轴是否显示
name: optionsCollapse.xName, // 坐标轴名称 name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: { nameTextStyle: {
color: optionsCollapse.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsCollapse.nameFontSizeX fontSize: optionsSetup.nameFontSizeX
}, },
nameRotate: optionsCollapse.textAngle, // 文字角度 nameRotate: optionsSetup.textAngle, // 文字角度
inverse: optionsCollapse.reversalX, // 轴反转 inverse: optionsSetup.reversalX, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
interval: optionsCollapse.textInterval, // 文字间隔 interval: optionsSetup.textInterval, // 文字间隔
rotate: optionsCollapse.textAngle, // 文字角度 rotate: optionsSetup.textAngle, // 文字角度
textStyle: { textStyle: {
color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 color: optionsSetup.Xcolor, // x轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeX fontSize: optionsSetup.fontSizeX
} }
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsCollapse.lineColorX color: optionsSetup.lineColorX
} }
}, },
splitLine: { splitLine: {
show: optionsCollapse.isShowSplitLineX, show: optionsSetup.isShowSplitLineX,
lineStyle: { lineStyle: {
color: optionsCollapse.splitLineColorX color: optionsSetup.splitLineColorX
} }
} }
}; };
@ -201,29 +201,29 @@ export default {
}, },
// Y轴设置 // Y轴设置
setOptionsY() { setOptionsY() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = [ const yAxis = [
{ {
type: "value", type: "value",
splitNumber: optionsCollapse.splitNumberLeft,// 均分 splitNumber: optionsSetup.splitNumberLeft,// 均分
show: optionsCollapse.isShowYLeft, // 坐标轴是否显示 show: optionsSetup.isShowYLeft, // 坐标轴是否显示
name: optionsCollapse.textNameYLeft, // 坐标轴名称 name: optionsSetup.textNameYLeft, // 坐标轴名称
nameTextStyle: { // 别名 nameTextStyle: { // 别名
color: optionsCollapse.nameColorYLeft, color: optionsSetup.nameColorYLeft,
fontSize: optionsCollapse.namefontSizeYLeft fontSize: optionsSetup.namefontSizeYLeft
}, },
inverse: optionsCollapse.reversalY, // 轴反转 inverse: optionsSetup.reversalY, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: optionsCollapse.colorY, // y轴 坐标文字颜色 color: optionsSetup.colorY, // y轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeY fontSize: optionsSetup.fontSizeY
} }
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsCollapse.lineColorY color: optionsSetup.lineColorY
} }
}, },
splitLine: { splitLine: {
@ -232,25 +232,25 @@ export default {
}, },
{ {
type: "value", type: "value",
splitNumber: optionsCollapse.splitNumberRight,// 均分 splitNumber: optionsSetup.splitNumberRight,// 均分
show: optionsCollapse.isShowYRight, // 坐标轴是否显示 show: optionsSetup.isShowYRight, // 坐标轴是否显示
name: optionsCollapse.textNameYRight, // 坐标轴名称 name: optionsSetup.textNameYRight, // 坐标轴名称
nameTextStyle: { // 别名 nameTextStyle: { // 别名
color: optionsCollapse.nameColorYRight, color: optionsSetup.nameColorYRight,
fontSize: optionsCollapse.namefontSizeYRight fontSize: optionsSetup.namefontSizeYRight
}, },
inverse: optionsCollapse.reversalY, // 轴反转 inverse: optionsSetup.reversalY, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: optionsCollapse.colorY, // y轴 坐标文字颜色 color: optionsSetup.colorY, // y轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeY fontSize: optionsSetup.fontSizeY
} }
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsCollapse.lineColorY color: optionsSetup.lineColorY
} }
}, },
splitLine: { splitLine: {
@ -262,16 +262,16 @@ export default {
}, },
// 折线设置 数值设置 // 折线设置 数值设置
setOptionsTop() { setOptionsTop() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
for (const key in series) { for (const key in series) {
if (series[key].type == "line") { if (series[key].type == "line") {
series[key].showSymbol = optionsCollapse.markPoint; series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsCollapse.pointSize; series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsCollapse.smoothCurve; series[key].smooth = optionsSetup.smoothCurve;
if (optionsCollapse.area) { if (optionsSetup.area) {
series[key].areaStyle = { series[key].areaStyle = {
opacity: optionsCollapse.areaThickness / 100 opacity: optionsSetup.areaThickness / 100
}; };
} else { } else {
series[key].areaStyle = { series[key].areaStyle = {
@ -279,16 +279,16 @@ export default {
}; };
} }
series[key].lineStyle = { series[key].lineStyle = {
width: optionsCollapse.lineWidth width: optionsSetup.lineWidth
}; };
series[key].itemStyle.borderRadius = optionsCollapse.radius; series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = { series[key].label = {
show: optionsCollapse.isShowLine, show: optionsSetup.isShowLine,
position: "top", position: "top",
distance: optionsCollapse.distanceLine, distance: optionsSetup.distanceLine,
fontSize: optionsCollapse.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsCollapse.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsCollapse.fontWeightLine fontWeight: optionsSetup.fontWeightLine
}; };
} }
} }
@ -296,71 +296,54 @@ export default {
}, },
// 柱体设置 数值设置 // 柱体设置 数值设置
setOptionsBar() { setOptionsBar() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
for (const key in series) { for (const key in series) {
if (series[key].type == "bar") { if (series[key].type == "bar") {
series[key].label = { series[key].label = {
show: optionsCollapse.isShowBar, show: optionsSetup.isShowBar,
position: "top", position: "top",
distance: optionsCollapse.distanceBar, distance: optionsSetup.distanceBar,
fontSize: optionsCollapse.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsCollapse.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsCollapse.fontWeightBar fontWeight: optionsSetup.fontWeightBar
}; };
series[key].barWidth = optionsCollapse.maxWidth; series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsCollapse.minHeight; series[key].barMinHeight = optionsSetup.minHeight;
series[key].itemStyle.barBorderRadius = optionsCollapse.radius; series[key].itemStyle.barBorderRadius = optionsSetup.radius;
} }
} }
this.options.series = series; this.options.series = series;
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip() { setOptionsTooltip() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const tooltip = { const tooltip = {
trigger: "item", trigger: "item",
show: true, show: true,
textStyle: { textStyle: {
color: optionsCollapse.lineColor, color: optionsSetup.lineColor,
fontSize: optionsCollapse.tipFontSize fontSize: optionsSetup.tipFontSize
} }
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
// 边距设置 // 边距设置
setOptionsMargin() { setOptionsMargin() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsSetup.marginLeft,
right: optionsCollapse.marginRight, right: optionsSetup.marginRight,
bottom: optionsCollapse.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsCollapse.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
/* // 图例操作 legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition;
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.lengedFontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
console.log(legend);
},*/
// 图例颜色修改 // 图例颜色修改
setOptionsColor() { setOptionsColor() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const customColor = optionsCollapse.customColor; const customColor = optionsSetup.customColor;
if (!customColor) return; if (!customColor) return;
const arrColor = []; const arrColor = [];
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
@ -377,16 +360,23 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const staticData = typeof val == "string" ? JSON.parse(val) : val; const series = this.options.series;
let axis = [];
let bar = [];
let line = [];
for (const i in val) {
axis[i] = val[i].axis;
bar[i] = val[i].bar;
line[i] = val[i].line;
}
// x轴 // x轴
this.options.xAxis.data = staticData.xAxis; this.options.xAxis.data = axis;
// series // series
const series = this.options.series;
for (const i in series) { for (const i in series) {
for (const j in staticData.series) { if (series[i].type == "bar") {
if (series[i].type == staticData.series[j].type) { series[i].data = bar;
series[i].data = staticData.series[j].data; } else {
} series[i].data = line;
} }
} }
}, },

10
report-ui/src/views/report/bigscreen/designer/widget/temp.vue
Unescape Escape View File

@ -6,7 +6,7 @@
!--> !-->
<template> <template>
<div> <div>
<component :is="type" :value="value" :ispreview="true" /> <component :is="type" :value="value" :ispreview="true"/>
</div> </div>
</template> </template>
@ -21,7 +21,7 @@ import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue"; import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue"; import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./widgetBarlinechart"; import widgetBarlinechart from "./bar/widgetBarlinechart";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import WidgetPiechart from "./widgetPiechart.vue"; import WidgetPiechart from "./widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue"; import WidgetFunnel from "./widgetFunnel.vue";
@ -72,13 +72,15 @@ export default {
type: String, type: String,
value: { value: {
type: [Object], type: [Object],
default: () => {} default: () => {
}
} }
}, },
data() { data() {
return {}; return {};
}, },
mounted() {}, mounted() {
},
methods: {} methods: {}
}; };
</script> </script>

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

@ -17,7 +17,7 @@
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
> >
<component :is="type" :value="value" /> <component :is="type" :value="value"/>
</avue-draggable> </avue-draggable>
</template> </template>
@ -33,7 +33,7 @@ import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue"; import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./widgetBarlinechart"; import widgetBarlinechart from "./bar/widgetBarlinechart";
import WidgetPiechart from "./widgetPiechart.vue"; import WidgetPiechart from "./widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue"; import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from "./widgetGauge.vue"; import WidgetGauge from "./widgetGauge.vue";
@ -89,7 +89,8 @@ export default {
bigscreen: Object, bigscreen: Object,
value: { value: {
type: [Object], type: [Object],
default: () => {} default: () => {
}
}, },
step: Number step: Number
}, },
@ -119,11 +120,13 @@ export default {
return this.value.position.zIndex || 1; return this.value.position.zIndex || 1;
} }
}, },
mounted() {}, mounted() {
},
methods: { methods: {
handleFocus({ index, left, top, width, height }) {}, handleFocus({index, left, top, width, height}) {
handleBlur({ index, left, top, width, height }) { },
this.$emit("onActivated", { index, left, top, width, height }); handleBlur({index, left, top, width, height}) {
this.$emit("onActivated", {index, left, top, width, height});
this.$refs.draggable.setActive(true); this.$refs.draggable.setActive(true);
} }
} }
@ -134,11 +137,13 @@ export default {
.vue-draggalbe { .vue-draggalbe {
position: absolute; position: absolute;
} }
.widget-active { .widget-active {
cursor: move; cursor: move;
border: 1px dashed #09f; border: 1px dashed #09f;
background-color: rgba(115, 170, 229, 0.5); background-color: rgba(115, 170, 229, 0.5);
} }
.avue-draggable { .avue-draggable {
padding: 0 !important; padding: 0 !important;
} }

Write Preview
Loading…
Cancel
Save