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

静态数据调整

Browse Source
qianming 3 years ago
parent fe77935229
commit 3d6f855508
6 changed files with 1380 additions and 1358 deletions
Show Stats Download Patch File Download Diff File

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

@ -608,7 +608,13 @@ export const widgetBarchart = {
placeholder: '', placeholder: '',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}, value: [
{"axis": "苹果", "data": 1000},
{"axis": "三星", "data": 2229},
{"axis": "小米", "data": 3879},
{"axis": "oppo", "data": 2379},
{"axis": "vivo", "data": 4079},
],
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -659,4 +665,4 @@ export const widgetBarchart = {
}, },
], ],
} }
} }

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

@ -621,7 +621,13 @@ export const widgetLinechart = {
placeholder: '', placeholder: '',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]}, value: [
{"axis": "苹果", "data": 1000},
{"axis": "三星", "data": 2229},
{"axis": "小米", "data": 3879},
{"axis": "oppo", "data": 2379},
{"axis": "vivo", "data": 4079},
],
}, },
{ {
type: 'dycustComponents', type: 'dycustComponents',
@ -671,4 +677,4 @@ export const widgetLinechart = {
}, },
], ],
} }
} }

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

@ -299,7 +299,7 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
@ -307,24 +307,29 @@ export default {
); );
}, },
// 静态数据 // 静态数据
staticDataFn(val, optionsSetup) { staticDataFn(val) {
const staticData = typeof val == "string" ? JSON.parse(val) : val; const optionsSetup = this.optionsSetup;
const series = this.options.series;
let axis = [];
let data = [];
for (const i in val) {
axis[i] = val[i].axis;
data[i] = val[i].data
}
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
this.options.yAxis.data = staticData.categories; this.options.yAxis.data = axis;
this.options.xAxis.type = "value"; this.options.xAxis.type = "value";
this.options.yAxis.type = "category"; this.options.yAxis.type = "category";
} else { } else {
this.options.xAxis.data = staticData.categories; this.options.xAxis.data = axis;
this.options.yAxis.data = []; this.options.yAxis.data = [];
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// series
const series = this.options.series;
if (series[0].type == "bar") { if (series[0].type == "bar") {
series[0].data = staticData.series[0].data; series[0].data = data;
} }
}, },
// 动态数据 // 动态数据

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

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize /> <v-chart :options="options" autoresize/>
</div> </div>
</template> </template>
@ -110,56 +110,56 @@ 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
} }
} }
}; };
@ -167,36 +167,36 @@ export default {
}, },
// Y轴设置 // Y轴设置
setOptionsY() { setOptionsY() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = { const yAxis = {
type: "value", type: "value",
scale : optionsCollapse.scale, scale: optionsSetup.scale,
splitNumber: optionsCollapse.splitNumber,// 均分 splitNumber: optionsSetup.splitNumber,// 均分
show: optionsCollapse.isShowY, // 坐标轴是否显示 show: optionsSetup.isShowY, // 坐标轴是否显示
name: optionsCollapse.textNameY, // 坐标轴名称 name: optionsSetup.textNameY, // 坐标轴名称
nameTextStyle: { // 别名 nameTextStyle: { // 别名
color: optionsCollapse.nameColorY, color: optionsSetup.nameColorY,
fontSize: optionsCollapse.namefontSizeY fontSize: optionsSetup.namefontSizeY
}, },
inverse: optionsCollapse.reversalY, // 轴反转 inverse: optionsSetup.reversalY, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
rotate: optionsCollapse.ytextAngle, // 文字角度 rotate: optionsSetup.ytextAngle, // 文字角度
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: {
show: optionsCollapse.isShowSplitLineY, show: optionsSetup.isShowSplitLineY,
lineStyle: { lineStyle: {
color: optionsCollapse.splitLineColorY color: optionsSetup.splitLineColorY
} }
} }
}; };
@ -204,16 +204,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 = {
@ -222,15 +222,15 @@ export default {
} }
series[key].lineStyle = { series[key].lineStyle = {
width: optionsCollapse.lineWidth width: optionsSetup.lineWidth
}; };
series[key].label = { series[key].label = {
show: optionsCollapse.isShow, show: optionsSetup.isShow,
position: "top", position: "top",
distance: 10, distance: 10,
fontSize: optionsCollapse.fontSize, fontSize: optionsSetup.fontSize,
color: optionsCollapse.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsCollapse.fontWeight fontWeight: optionsSetup.fontWeight
}; };
} }
} }
@ -238,50 +238,50 @@ export default {
}, },
// 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.fontSize fontSize: optionsSetup.fontSize
} }
}; };
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 // 图例操作 legend
setOptionsLegend() { setOptionsLegend() {
const optionsCollapse = this.optionsSetup; const optionsSetup = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto"; legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto"; legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto"; legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom = legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto"; optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsCollapse.lengedColor, color: optionsSetup.lengedColor,
fontSize: optionsCollapse.fontSize fontSize: optionsSetup.fontSize
}; };
legend.itemWidth = optionsCollapse.lengedWidth; legend.itemWidth = optionsSetup.lengedWidth;
}, },
// 图例颜色修改 // 图例颜色修改
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++) {
@ -298,14 +298,19 @@ 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 data = [];
for (const i in val) {
axis[i] = val[i].axis;
data[i] = val[i].data
}
// x轴 // x轴
this.options.xAxis.data = staticData.categories; this.options.xAxis.data = axis;
// series // series
const series = this.options.series;
for (const i in series) { for (const i in series) {
if (series[i].type == "line") { if (series[i].type == "line") {
series[i].data = staticData.series[0].data; series[i].data = data;
} }
} }
}, },

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

@ -19,8 +19,8 @@ import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue"; import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue"; import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue"; import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./widgetBarchart.vue"; import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetLinechart from "./widgetLinechart.vue"; import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./widgetBarlinechart"; import widgetBarlinechart from "./widgetBarlinechart";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import WidgetPiechart from "./widgetPiechart.vue"; import WidgetPiechart from "./widgetPiechart.vue";

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

@ -30,9 +30,9 @@ import widgetImage from "./widgetImage.vue";
import widgetSlider from "./widgetSlider.vue"; import widgetSlider from "./widgetSlider.vue";
import widgetVideo from "./widgetVideo.vue"; import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue"; import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./widgetBarchart.vue"; import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./widgetLinechart.vue"; import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./widgetBarlinechart"; import widgetBarlinechart from "./widgetBarlinechart";
import WidgetPiechart from "./widgetPiechart.vue"; import WidgetPiechart from "./widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue"; import WidgetFunnel from "./widgetFunnel.vue";

Write Preview
Loading…
Cancel
Save