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

添加关联

Browse Source
qianlishi 2 years ago
parent 1b8b97cb0d
commit 5cac55161f
20 changed files with 1661 additions and 1429 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,171 +1,181 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetBarCompareChart", name: "WidgetBarCompareChart",
//参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ //参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
options: { options: {
title: { title: {
//text: '柱状对比图', //text: '柱状对比图',
x: 'center', x: "center",
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
}, },
}, },
//边距 //边距
grid: [ grid: [
{//左 {
show: false,//边框线 //左
left: '4%', show: false, //边框线
left: "4%",
top: 60, top: 60,
bottom: 10, bottom: 10,
containLabel: true, containLabel: true,
width: '40%' width: "40%",
}, },
{//中间字体位置 {
//中间字体位置
show: false, show: false,
left: '50.5%', left: "50.5%",
top: 60, top: 60,
bottom: 25, bottom: 25,
width: '0%' width: "0%",
}, },
{//右 {
//右
show: false, show: false,
right: '4%', right: "4%",
top: 60, top: 60,
bottom: 10, bottom: 10,
containLabel: true, containLabel: true,
width: '40%' width: "40%",
}, },
], ],
//图例 //图例
legend: { legend: {
textStyle: { textStyle: {
color: '#fff', color: "#fff",
textAlign: 'center' textAlign: "center",
}, },
//itemGap:80, //itemGap:80,
//itemWidth: 0 //itemWidth: 0
}, },
xAxis: [ xAxis: [
{// 左 {
// 左
splitNumber: 2, splitNumber: 2,
show: true, show: true,
type: 'value', type: "value",
inverse: true, inverse: true,
axisLine: {//底分割线 axisLine: {
//底分割线
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
position: 'bottom', position: "bottom",
axisLabel: { // x轴 axisLabel: {
// x轴
show: true, show: true,
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
fontSize: 12 fontSize: 12,
} },
}, },
splitLine: { // 竖分割线 splitLine: {
// 竖分割线
show: true, show: true,
lineStyle: { lineStyle: {
color: '#57617f', color: "#57617f",
width: 1, width: 1,
type: 'solid' type: "solid",
} },
} },
}, },
{ {
gridIndex: 1, gridIndex: 1,
show: false, show: false,
}, },
{// 右 {
// 右
gridIndex: 2, gridIndex: 2,
show: true, show: true,
type: 'value', type: "value",
axisLine: { axisLine: {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
position: 'bottom', position: "bottom",
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
fontSize: 12, fontSize: 12,
}, },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#57617f', color: "#57617f",
width: 1, width: 1,
type: 'solid', type: "solid",
}, },
}, },
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'category', type: "category",
inverse: true, inverse: true,
position: 'right', position: "right",
axisLine: { axisLine: {
show: false, show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false, show: false,
}, },
data: [], data: [],
}, },
{//处理轴数据 {
//处理轴数据
gridIndex: 1, gridIndex: 1,
type: 'category', type: "category",
inverse: true, inverse: true,
position: 'left', position: "left",
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
align: 'center', align: "center",
color: '#ffffff', color: "#ffffff",
fontSize: 14, fontSize: 14,
} },
}, },
data: [], data: [],
}, },
{ {
gridIndex: 2, gridIndex: 2,
type: 'category', type: "category",
inverse: true, inverse: true,
position: 'left', position: "left",
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false, show: false,
@ -174,19 +184,18 @@ export default {
], ],
series: [ series: [
{ {
name: '', name: "",
type: 'bar', type: "bar",
barGap: 20, barGap: 20,
barWidth: 15, barWidth: 15,
label: { label: {
normal: { normal: {
show: true, show: true,
color: 'red', color: "red",
position: 'insideLeft', position: "insideLeft",
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
} },
}, },
emphasis: { emphasis: {
show: false, show: false,
@ -194,7 +203,7 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: '#36c5e7', color: "#36c5e7",
barBorderRadius: [8, 0, 0, 8], barBorderRadius: [8, 0, 0, 8],
}, },
emphasis: { emphasis: {
@ -204,8 +213,8 @@ export default {
data: [], data: [],
}, },
{ {
name: '', name: "",
type: 'bar', type: "bar",
barGap: 20, barGap: 20,
barWidth: 15, barWidth: 15,
xAxisIndex: 2, xAxisIndex: 2,
@ -213,16 +222,16 @@ export default {
label: { label: {
normal: { normal: {
show: true, show: true,
color: 'red', color: "red",
position: 'insideRight', position: "insideRight",
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
} },
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: '#e68b55', color: "#e68b55",
barBorderRadius: [0, 8, 8, 0], barBorderRadius: [0, 8, 8, 0],
}, },
emphasis: { emphasis: {
@ -231,12 +240,12 @@ export default {
}, },
data: [], data: [],
}, },
] ],
}, },
optionsStyle: {}, optionsStyle: {},
optionsData: {}, optionsData: {},
optionsSetup: {}, optionsSetup: {},
flagInter: null flagInter: null,
}; };
}, },
computed: { computed: {
@ -247,9 +256,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -260,8 +269,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -269,6 +278,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -311,8 +328,8 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const xAxisLeft = { const xAxisLeft = {
splitNumber: optionsSetup.splitNumberLeft, splitNumber: optionsSetup.splitNumberLeft,
type: 'value', type: "value",
show : optionsSetup.hideXLeft, show: optionsSetup.hideXLeft,
inverse: true, inverse: true,
//X轴线 //X轴线
axisLine: { axisLine: {
@ -325,22 +342,24 @@ export default {
show: optionsSetup.tickLineLeft, show: optionsSetup.tickLineLeft,
}, },
position: optionsSetup.positionXLeft, position: optionsSetup.positionXLeft,
axisLabel: { // x轴 axisLabel: {
// x轴
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.colorXLeft, color: optionsSetup.colorXLeft,
fontSize: optionsSetup.fontSizeXLeft fontSize: optionsSetup.fontSizeXLeft,
} },
}, },
splitLine: { // 分割线 splitLine: {
// 分割线
show: optionsSetup.isShowSplitLineLeft, show: optionsSetup.isShowSplitLineLeft,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorLeft, color: optionsSetup.splitLineColorLeft,
width: optionsSetup.splitLineFontWidthLeft, width: optionsSetup.splitLineFontWidthLeft,
type: 'solid' type: "solid",
} },
} },
} };
this.options.xAxis[0] = xAxisLeft; this.options.xAxis[0] = xAxisLeft;
}, },
// 右X轴设置 // 右X轴设置
@ -349,9 +368,10 @@ export default {
const xAxisRight = { const xAxisRight = {
gridIndex: 2, gridIndex: 2,
splitNumber: optionsSetup.splitNumberRight, splitNumber: optionsSetup.splitNumberRight,
show : optionsSetup.hideXRight, show: optionsSetup.hideXRight,
type: 'value', type: "value",
axisLine: {//X轴线 axisLine: {
//X轴线
show: optionsSetup.lineXRight, show: optionsSetup.lineXRight,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorXRight, color: optionsSetup.lineColorXRight,
@ -361,22 +381,24 @@ export default {
show: optionsSetup.tickLineRight, show: optionsSetup.tickLineRight,
}, },
position: optionsSetup.positionXRight, position: optionsSetup.positionXRight,
axisLabel: { // x轴 axisLabel: {
// x轴
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.colorXRight, color: optionsSetup.colorXRight,
fontSize: optionsSetup.fontSizeXRight fontSize: optionsSetup.fontSizeXRight,
} },
}, },
splitLine: { // 分割线 splitLine: {
// 分割线
show: optionsSetup.isShowSplitLineRight, show: optionsSetup.isShowSplitLineRight,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorRight, color: optionsSetup.splitLineColorRight,
width: optionsSetup.splitLineFontWidthRight, width: optionsSetup.splitLineFontWidthRight,
type: 'solid' type: "solid",
} },
} },
} };
this.options.xAxis[2] = xAxisRight; this.options.xAxis[2] = xAxisRight;
}, },
// Y轴设置 // Y轴设置
@ -385,11 +407,11 @@ export default {
const axisLine = { const axisLine = {
show: optionsSetup.lineY, show: optionsSetup.lineY,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorY color: optionsSetup.lineColorY,
} },
}; };
const axisTick = { const axisTick = {
show: optionsSetup.tickLineY show: optionsSetup.tickLineY,
}; };
const axisLabel = { const axisLabel = {
show: optionsSetup.hideY, show: optionsSetup.hideY,
@ -397,11 +419,11 @@ export default {
align: optionsSetup.textAlignY, align: optionsSetup.textAlignY,
color: optionsSetup.colorY, color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY, fontSize: optionsSetup.fontSizeY,
} },
}; };
this.options.yAxis[1]['axisLine'] = axisLine; this.options.yAxis[1]["axisLine"] = axisLine;
this.options.yAxis[1]['axisTick'] = axisTick; this.options.yAxis[1]["axisTick"] = axisTick;
this.options.yAxis[1]['axisLabel'] = axisLabel; this.options.yAxis[1]["axisLabel"] = axisLabel;
}, },
// 数值设定、柱体设置 // 数值设定、柱体设置
setOptionsTop() { setOptionsTop() {
@ -409,36 +431,36 @@ export default {
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[0].label = { (series[0].label = {
normal: { normal: {
show: optionsSetup.isShow, show: optionsSetup.isShow,
position: 'insideLeft', position: "insideLeft",
textStyle: { textStyle: {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} },
}, },
emphasis: { emphasis: {
show: false, show: false,
}, },
}, }),
series[1].label = { (series[1].label = {
normal: { normal: {
show: optionsSetup.isShow, show: optionsSetup.isShow,
color: 'red', color: "red",
position: 'insideRight', position: "insideRight",
textStyle: { textStyle: {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} },
}, },
emphasis: { emphasis: {
show: false, show: false,
}, },
}, }),
series[key].barWidth = optionsSetup.maxWidth; (series[key].barWidth = optionsSetup.maxWidth);
} }
} }
this.options.series = series; this.options.series = series;
@ -451,8 +473,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -460,7 +482,8 @@ export default {
setOptionsGrid() { setOptionsGrid() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const grid = [ const grid = [
{//左 {
//左
show: optionsSetup.frameLineLeft, show: optionsSetup.frameLineLeft,
borderColor: optionsSetup.borderColorLeft, borderColor: optionsSetup.borderColorLeft,
borderWidth: optionsSetup.borderWidthLeft, borderWidth: optionsSetup.borderWidthLeft,
@ -468,16 +491,18 @@ export default {
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
containLabel: true, containLabel: true,
width: '40%' width: "40%",
}, },
{//中间字体位置 {
//中间字体位置
show: false, show: false,
left: "51%", left: "51%",
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom + 15, bottom: optionsSetup.marginBottom + 15,
width: '0%' width: "0%",
}, },
{//右 {
//右
show: optionsSetup.frameLineRight, show: optionsSetup.frameLineRight,
borderColor: optionsSetup.borderColorRight, borderColor: optionsSetup.borderColorRight,
borderWidth: optionsSetup.borderWidthRight, borderWidth: optionsSetup.borderWidthRight,
@ -485,9 +510,9 @@ export default {
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
containLabel: true, containLabel: true,
width: '40%' width: "40%",
}, },
] ];
this.options.grid = grid; this.options.grid = grid;
}, },
// 图例操作 // 图例操作
@ -497,32 +522,31 @@ export default {
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom = optionsSetup.longitudinalPosition;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
// 图例名称设置 // 图例名称设置
setOptionsLegendName(name){ setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值 // 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == '') { if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
series[i].name = name[i]; series[i].name = name[i];
} }
this.options.legend['data'] = name; this.options.legend["data"] = name;
}else { } else {
const arr = legendName.split('|'); const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i]; series[i].name = arr[i];
} }
this.options.legend['data'] = arr this.options.legend["data"] = arr;
} }
}, },
// 颜色修改、圆角修改 // 颜色修改、圆角修改
@ -533,21 +557,21 @@ export default {
const itemStyleLeft = { const itemStyleLeft = {
normal: { normal: {
color: customColor[0].color, color: customColor[0].color,
barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius] barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius],
}, },
emphasis: { emphasis: {
show: false, show: false,
}, },
} };
const itemStyleRight = { const itemStyleRight = {
normal: { normal: {
color: customColor[1].color, color: customColor[1].color,
barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0] barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0],
}, },
emphasis: { emphasis: {
show: false, show: false,
}, },
} };
this.options.series[0].itemStyle = itemStyleLeft; this.options.series[0].itemStyle = itemStyleLeft;
this.options.series[1].itemStyle = itemStyleRight; this.options.series[1].itemStyle = itemStyleRight;
}, },
@ -558,16 +582,16 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
//去重 //去重
setUnique(arr) { setUnique(arr) {
let newArr = []; let newArr = [];
arr.forEach(item => { arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item); return newArr.includes(item) ? "" : newArr.push(item);
}); });
return newArr; return newArr;
}, },
@ -598,15 +622,15 @@ export default {
arrayList.push({ arrayList.push({
name: yAxisList[i], name: yAxisList[i],
data: data, data: data,
}) });
legendName.push(yAxisList[i]); legendName.push(yAxisList[i]);
} }
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;
this.options.series[1]['data'] = arrayList[1].data; this.options.series[1]["data"] = arrayList[1].data;
this.options.yAxis[1]['data'] = xAxisList; this.options.yAxis[1]["data"] = xAxisList;
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
@ -623,25 +647,25 @@ export default {
}, },
getEchartData(val, optionsSetup) { getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(optionsSetup, res); this.renderingFn(optionsSetup, res);
}); });
}, },
renderingFn(optionsSetup, val) { renderingFn(optionsSetup, val) {
const legendName = []; const legendName = [];
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;
this.options.series[1]['data'] = val.series[1].data; this.options.series[1]["data"] = val.series[1].data;
legendName.push(val.series[0].name); legendName.push(val.series[0].name);
legendName.push(val.series[1].name); legendName.push(val.series[1].name);
} }
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
} },
} },
}; };
</script> </script>
@ -651,5 +675,4 @@ export default {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style> </style>

137
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
Unescape Escape View File

@ -1,16 +1,17 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetBarStackchart", name: "WidgetBarStackchart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -18,8 +19,8 @@ export default {
grid: {}, grid: {},
legend: { legend: {
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
xAxis: { xAxis: {
type: "category", type: "category",
@ -27,9 +28,9 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -37,26 +38,26 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
series: [ series: [
{ {
data: [], data: [],
name: '', name: "",
type: "bar", type: "bar",
barGap: "0%", barGap: "0%",
itemStyle: { itemStyle: {
barBorderRadius: null barBorderRadius: null,
} },
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsSetup: {}, optionsSetup: {},
flagInter: null flagInter: null,
}; };
}, },
computed: { computed: {
@ -67,9 +68,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -80,8 +81,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -89,6 +90,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -134,7 +143,7 @@ export default {
name: optionsSetup.nameX, name: optionsSetup.nameX,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX fontSize: optionsSetup.nameFontSizeX,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
@ -147,23 +156,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorX, color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX fontSize: optionsSetup.fontSizeX,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX, width: optionsSetup.lineWidthX,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineX, show: optionsSetup.isShowSplitLineX,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorX, color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX, width: optionsSetup.splitLineWidthX,
} },
} },
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
@ -181,7 +190,7 @@ export default {
name: optionsSetup.textNameY, name: optionsSetup.textNameY,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorY, color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY fontSize: optionsSetup.nameFontSizeY,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalY, inverse: optionsSetup.reversalY,
@ -192,23 +201,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorY, color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY fontSize: optionsSetup.fontSizeY,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorY, color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY, width: optionsSetup.lineWidthY,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineY, show: optionsSetup.isShowSplitLineY,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorY, color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY, width: optionsSetup.splitLineWidthY,
} },
} },
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
@ -220,8 +229,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -233,7 +242,7 @@ export default {
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true,
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
@ -244,32 +253,31 @@ export default {
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom = optionsSetup.longitudinalPosition;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
// 图例名称设置 // 图例名称设置
setOptionsLegendName(name){ setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值 // 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == '') { if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
series[i].name = name[i]; series[i].name = name[i];
} }
this.options.legend['data'] = name; this.options.legend["data"] = name;
}else { } else {
const arr = legendName.split('|'); const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i]; series[i].name = arr[i];
} }
this.options.legend['data'] = arr this.options.legend["data"] = arr;
} }
}, },
// 数据解析 // 数据解析
@ -280,27 +288,27 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
//去重 //去重
setUnique(arr) { setUnique(arr) {
let newArr = []; let newArr = [];
arr.forEach(item => { arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item); return newArr.includes(item) ? "" : newArr.push(item);
}); });
return newArr; return newArr;
}, },
//获取堆叠样式 //获取堆叠样式
getStackStyle() { getStackStyle() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
let style = "" let style = "";
if (optionsSetup.stackStyle == "upDown") { if (optionsSetup.stackStyle == "upDown") {
style = "total" style = "total";
} }
return style return style;
}, },
//静态数据 //静态数据
staticDataFn(val) { staticDataFn(val) {
@ -353,9 +361,9 @@ export default {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
barBorderRadius: optionsSetup.radius, barBorderRadius: optionsSetup.radius,
} },
} },
}) });
legendName.push(yAxisList[i]); legendName.push(yAxisList[i]);
} }
this.options.series = series; this.options.series = series;
@ -370,7 +378,7 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
@ -387,7 +395,7 @@ export default {
}, },
getEchartData(val, optionsSetup) { getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(optionsSetup, res); this.renderingFn(optionsSetup, res);
}); });
}, },
@ -434,17 +442,17 @@ export default {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
barBorderRadius: optionsSetup.radius, barBorderRadius: optionsSetup.radius,
} },
} },
}) });
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
this.options.series = series; this.options.series = series;
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
} },
} },
}; };
</script> </script>
@ -454,5 +462,4 @@ export default {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style> </style>

200
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
Unescape Escape View File

@ -1,18 +1,18 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import echarts from "echarts"; import echarts from "echarts";
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -23,63 +23,63 @@ export default {
y: "4%", y: "4%",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: "22" fontSize: "22",
}, },
subtextStyle: { subtextStyle: {
color: "#90979c", color: "#90979c",
fontSize: "16" fontSize: "16",
} },
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
type: "shadow" type: "shadow",
} },
}, },
grid: { grid: {
top: "15%", top: "15%",
right: "3%", right: "3%",
left: "5%", left: "5%",
bottom: "12%" bottom: "12%",
}, },
legend: { legend: {
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: [], data: [],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(255,255,255,0.12)" color: "rgba(255,255,255,0.12)",
} },
}, },
axisLabel: { axisLabel: {
margin: 10, margin: 10,
color: "#e2e9ff", color: "#e2e9ff",
textStyle: { textStyle: {
fontSize: 14 fontSize: 14,
} },
} },
}, },
yAxis: { yAxis: {
name: "", name: "",
axisLabel: { axisLabel: {
formatter: "{value}", formatter: "{value}",
color: "#e2e9ff" color: "#e2e9ff",
}, },
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
color: "rgba(255,255,255,0)" color: "rgba(255,255,255,0)",
} },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "rgba(255,255,255,0.12)" color: "rgba(255,255,255,0.12)",
} },
} },
}, },
series: [ series: [
{ {
@ -88,23 +88,27 @@ export default {
barWidth: "20px", barWidth: "20px",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[ [
{ {
offset: 0, offset: 0,
color: "rgba(0,244,255,1)" // 0% 处的颜色 color: "rgba(0,244,255,1)", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "rgba(0,77,167,1)" // 100% 处的颜色 color: "rgba(0,77,167,1)", // 100% 处的颜色
} },
], ],
false false
), ),
shadowColor: "rgba(0,160,221,1)", shadowColor: "rgba(0,160,221,1)",
//模糊细数 //模糊细数
shadowBlur: 4 shadowBlur: 4,
} },
}, },
label: { label: {
normal: { normal: {
@ -116,17 +120,17 @@ export default {
a: { a: {
fontSize: 15, fontSize: 15,
color: "#fff", color: "#fff",
align: "center" align: "center",
} },
} },
} },
} },
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -137,9 +141,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -150,8 +154,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -159,6 +163,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -205,7 +217,7 @@ export default {
name: optionsSetup.nameX, name: optionsSetup.nameX,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX fontSize: optionsSetup.nameFontSizeX,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
@ -218,23 +230,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorX, color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX fontSize: optionsSetup.fontSizeX,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX, width: optionsSetup.lineWidthX,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineX, show: optionsSetup.isShowSplitLineX,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorX, color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX, width: optionsSetup.splitLineWidthX,
} },
} },
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
@ -252,7 +264,7 @@ export default {
name: optionsSetup.textNameY, name: optionsSetup.textNameY,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorY, color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY fontSize: optionsSetup.nameFontSizeY,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalY, inverse: optionsSetup.reversalY,
@ -263,23 +275,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorY, color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY fontSize: optionsSetup.fontSizeY,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorY, color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY, width: optionsSetup.lineWidthY,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineY, show: optionsSetup.isShowSplitLineY,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorY, color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY, width: optionsSetup.splitLineWidthY,
} },
} },
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
@ -295,8 +307,8 @@ export default {
distance: optionsSetup.distance, distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} };
} else { } else {
series[0].label = { series[0].label = {
show: optionsSetup.isShow, show: optionsSetup.isShow,
@ -304,8 +316,8 @@ export default {
distance: optionsSetup.distance, distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} };
} }
series[0].barWidth = optionsSetup.maxWidth; series[0].barWidth = optionsSetup.maxWidth;
} }
@ -318,8 +330,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -331,7 +343,7 @@ export default {
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true,
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
@ -339,43 +351,39 @@ export default {
setOptionsColor() { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const itemStyle = this.options.series[0]["itemStyle"]; const itemStyle = this.options.series[0]["itemStyle"];
let normal = {} let normal = {};
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
normal = { normal = {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
[ {
{ offset: 0,
offset: 0, color: optionsSetup.bar0color, // 0% 处的颜色
color: optionsSetup.bar0color // 0% 处的颜色 },
}, {
{ offset: 1,
offset: 1, color: optionsSetup.bar100color, // 100% 处的颜色
color: optionsSetup.bar100color // 100% 处的颜色 },
} ]),
],
),
barBorderRadius: optionsSetup.radius, //圆角 barBorderRadius: optionsSetup.radius, //圆角
shadowColor: optionsSetup.shadowColor, // 阴影颜色 shadowColor: optionsSetup.shadowColor, // 阴影颜色
shadowBlur: optionsSetup.shadowBlur //模糊系数 shadowBlur: optionsSetup.shadowBlur, //模糊系数
} };
} else { } else {
normal = { normal = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
[ {
{ offset: 0,
offset: 0, color: optionsSetup.bar0color, // 0% 处的颜色
color: optionsSetup.bar0color // 0% 处的颜色 },
}, {
{ offset: 1,
offset: 1, color: optionsSetup.bar100color, // 100% 处的颜色
color: optionsSetup.bar100color // 100% 处的颜色 },
} ]),
],
),
barBorderRadius: optionsSetup.radius, //圆角 barBorderRadius: optionsSetup.radius, //圆角
shadowColor: optionsSetup.shadowColor, // 阴影颜色 shadowColor: optionsSetup.shadowColor, // 阴影颜色
shadowBlur: optionsSetup.shadowBlur //模糊系数 shadowBlur: optionsSetup.shadowBlur, //模糊系数
} };
} }
itemStyle["normal"] = normal; itemStyle["normal"] = normal;
}, },
@ -386,10 +394,10 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData) ? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
// 静态数据 // 静态数据
staticDataFn(val) { staticDataFn(val) {
@ -399,7 +407,7 @@ export default {
let data = []; let data = [];
for (const i in val) { for (const i in val) {
axis[i] = val[i].axis; axis[i] = val[i].axis;
data[i] = val[i].data data[i] = val[i].data;
} }
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
@ -431,7 +439,7 @@ export default {
}, },
getEchartData(val, optionsSetup) { getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(optionsSetup, res); this.renderingFn(optionsSetup, res);
}); });
}, },
@ -456,8 +464,8 @@ export default {
series[i].data = val.series[i].data; series[i].data = val.series[i].data;
} }
} }
} },
} },
}; };
</script> </script>

217
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
Unescape Escape View File

@ -1,16 +1,17 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "widgetBarLineStackChart", name: "widgetBarLineStackChart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -18,8 +19,8 @@ export default {
grid: {}, grid: {},
legend: { legend: {
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
xAxis: { xAxis: {
type: "category", type: "category",
@ -27,37 +28,37 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#cdd5e2' color: "#cdd5e2",
} },
}, },
splitLine: { splitLine: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#666666' color: "#666666",
} },
}, },
}, },
{ {
type: 'value', type: "value",
nameTextStyle: { nameTextStyle: {
color: '#666666' color: "#666666",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#cdd5e2' color: "#cdd5e2",
} },
}, },
splitLine: { splitLine: {
show: false, show: false,
@ -65,33 +66,33 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#666666' color: "#666666",
} },
} },
} },
], ],
series: [ series: [
{ {
data: [], data: [],
name: '', name: "",
type: "bar", type: "bar",
barGap: "0%", barGap: "0%",
itemStyle: { itemStyle: {
barBorderRadius: null barBorderRadius: null,
} },
}, },
{ {
data: [], data: [],
name: '', name: "",
type: "line", type: "line",
itemStyle: {} itemStyle: {},
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsSetup: {}, optionsSetup: {},
flagInter: null flagInter: null,
}; };
}, },
computed: { computed: {
@ -102,9 +103,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -115,8 +116,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -124,6 +125,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -169,7 +178,7 @@ export default {
name: optionsSetup.nameX, name: optionsSetup.nameX,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX fontSize: optionsSetup.nameFontSizeX,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
@ -182,23 +191,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorX, color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX fontSize: optionsSetup.fontSizeX,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX, width: optionsSetup.lineWidthX,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineX, show: optionsSetup.isShowSplitLineX,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorX, color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX, width: optionsSetup.splitLineWidthX,
} },
} },
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
@ -217,7 +226,7 @@ export default {
// 别名 // 别名
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorYLeft, color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.nameFontSizeYLeft fontSize: optionsSetup.nameFontSizeYLeft,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
@ -226,10 +235,11 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorYLeft, color: optionsSetup.colorYLeft,
fontSize: optionsSetup.fontSizeYLeft fontSize: optionsSetup.fontSizeYLeft,
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineYLeft, show: optionsSetup.tickLineYLeft,
}, },
axisLine: { axisLine: {
@ -237,15 +247,15 @@ export default {
lineStyle: { lineStyle: {
color: optionsSetup.lineColorYLeft, color: optionsSetup.lineColorYLeft,
width: optionsSetup.lineWidthYLeft, width: optionsSetup.lineWidthYLeft,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineYLeft, show: optionsSetup.isShowSplitLineYLeft,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorYLeft, color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft, width: optionsSetup.splitLineFontWidthYLeft,
} },
} },
}, },
{ {
type: "value", type: "value",
@ -258,7 +268,7 @@ export default {
// 别名 // 别名
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorYRight, color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.nameFontSizeYRight fontSize: optionsSetup.nameFontSizeYRight,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
@ -267,10 +277,11 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorYRight, color: optionsSetup.colorYRight,
fontSize: optionsSetup.fontSizeYRight fontSize: optionsSetup.fontSizeYRight,
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineYRight, show: optionsSetup.tickLineYRight,
}, },
axisLine: { axisLine: {
@ -278,16 +289,16 @@ export default {
lineStyle: { lineStyle: {
width: optionsSetup.lineWidthYRight, width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight, color: optionsSetup.lineColorYRight,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineYRight, show: optionsSetup.isShowSplitLineYRight,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorYRight, color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight, width: optionsSetup.splitLineFontWidthYRight,
} },
} },
} },
]; ];
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
@ -299,8 +310,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -312,7 +323,7 @@ export default {
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true,
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
@ -323,12 +334,11 @@ export default {
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom = optionsSetup.longitudinalPosition;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
@ -338,17 +348,17 @@ export default {
const series = this.options.series; const series = this.options.series;
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值 // 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == '') { if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
series[i].name = name[i]; series[i].name = name[i];
} }
this.options.legend['data'] = name; this.options.legend["data"] = name;
} else { } else {
const arr = legendName.split('|'); const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i]; series[i].name = arr[i];
} }
this.options.legend['data'] = arr this.options.legend["data"] = arr;
} }
}, },
// 数据解析 // 数据解析
@ -359,16 +369,16 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
//去重 //去重
setUnique(arr) { setUnique(arr) {
let newArr = []; let newArr = [];
arr.forEach(item => { arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item); return newArr.includes(item) ? "" : newArr.push(item);
}); });
return newArr; return newArr;
}, },
@ -404,16 +414,21 @@ export default {
yAxisList = this.setUnique(yAxisList); yAxisList = this.setUnique(yAxisList);
const legendName = yAxisList; const legendName = yAxisList;
for (let i = 0; i < yAxisList.length; i++) { for (let i = 0; i < yAxisList.length; i++) {
const bar = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "bar"); const bar = this.getStaticSeriesData(
xAxisList,
yAxisList[i],
val,
"bar"
);
series.push({ series.push({
name: yAxisList[i], name: yAxisList[i],
type: 'bar', type: "bar",
data: bar, data: bar,
barGap: '0%', barGap: "0%",
barWidth: optionsSetup.maxWidth, barWidth: optionsSetup.maxWidth,
label: { label: {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
position: 'top', position: "top",
distance: optionsSetup.distanceBar, distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
@ -424,15 +439,20 @@ export default {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
barBorderRadius: optionsSetup.radius, barBorderRadius: optionsSetup.radius,
} },
} },
}) });
} }
for (let i = 0; i < yAxisList.length; i++) { for (let i = 0; i < yAxisList.length; i++) {
const line = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "line"); const line = this.getStaticSeriesData(
xAxisList,
yAxisList[i],
val,
"line"
);
series.push({ series.push({
name: yAxisList[i], name: yAxisList[i],
type: 'line', type: "line",
data: line, data: line,
yAxisIndex: 1, yAxisIndex: 1,
symbol: optionsSetup.symbol, symbol: optionsSetup.symbol,
@ -442,7 +462,7 @@ export default {
itemStyle: { itemStyle: {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
} },
}, },
// 线条 // 线条
lineStyle: { lineStyle: {
@ -451,20 +471,20 @@ export default {
}, },
label: { label: {
show: optionsSetup.isShowLine, show: optionsSetup.isShowLine,
position: 'top', position: "top",
distance: optionsSetup.distanceLine, distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine, fontWeight: optionsSetup.fontWeightLine,
}, },
}) });
} }
this.options.series = series; this.options.series = series;
this.options.xAxis.data = xAxisList; this.options.xAxis.data = xAxisList;
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";
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
@ -481,7 +501,7 @@ export default {
}, },
getEchartData(val, optionsSetup) { getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(optionsSetup, res); this.renderingFn(optionsSetup, res);
}); });
}, },
@ -506,13 +526,13 @@ export default {
const bar = this.getDynamicSeriesData(legendName[i], val.series, "bar"); const bar = this.getDynamicSeriesData(legendName[i], val.series, "bar");
series.push({ series.push({
name: legendName[i], name: legendName[i],
type: 'bar', type: "bar",
data: bar, data: bar,
barGap: '0%', barGap: "0%",
barWidth: optionsSetup.maxWidth, barWidth: optionsSetup.maxWidth,
label: { label: {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
position: 'top', position: "top",
distance: optionsSetup.distanceBar, distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
@ -523,12 +543,16 @@ export default {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
barBorderRadius: optionsSetup.radius, barBorderRadius: optionsSetup.radius,
} },
} },
}) });
} }
for (let i = 0; i < legendName.length; i++) { for (let i = 0; i < legendName.length; i++) {
const line = this.getDynamicSeriesData(legendName[i], val.series, "line"); const line = this.getDynamicSeriesData(
legendName[i],
val.series,
"line"
);
series.push({ series.push({
name: legendName[i], name: legendName[i],
type: "line", type: "line",
@ -541,7 +565,7 @@ export default {
itemStyle: { itemStyle: {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
} },
}, },
// 线条 // 线条
lineStyle: { lineStyle: {
@ -550,16 +574,16 @@ export default {
}, },
label: { label: {
show: optionsSetup.isShowLine, show: optionsSetup.isShowLine,
position: 'top', position: "top",
distance: optionsSetup.distanceLine, distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine, fontWeight: optionsSetup.fontWeightLine,
}, },
}) });
} }
this.options.series = series; this.options.series = series;
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
getDynamicSeriesData(legend, series, type) { getDynamicSeriesData(legend, series, type) {
@ -569,9 +593,9 @@ export default {
data = series[i].data; data = series[i].data;
} }
} }
return data return data;
}, },
} },
}; };
</script> </script>
@ -581,5 +605,4 @@ export default {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style> </style>

9
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
Unescape Escape View File

@ -5,6 +5,7 @@
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetBarlinechart", name: "WidgetBarlinechart",
components: {}, components: {},
@ -127,6 +128,14 @@ export default {
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性

306
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
Unescape Escape View File

@ -1,79 +1,86 @@
<template> <template>
<div :style='styleObj'> <div :style="styleObj">
<v-chart :options='options' autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import echarts from "echarts";
import echarts from 'echarts'; import { eventBusParams } from "@/utils/screen";
export default { export default {
name: 'widgetMoreBarLineChart', name: "widgetMoreBarLineChart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
options: { options: {
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
axisPointer: { axisPointer: {
type: 'shadow' type: "shadow",
} },
}, },
grid: { grid: {
left: '2%', left: "2%",
right: '4%', right: "4%",
bottom: '14%', bottom: "14%",
top: '16%', top: "16%",
containLabel: true containLabel: true,
}, },
legend: {}, legend: {},
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'], data: [
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#cdd5e2' color: "#cdd5e2",
},
}
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#666666' color: "#666666",
} },
}, },
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#cdd5e2' color: "#cdd5e2",
} },
}, },
splitLine: { splitLine: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#666666' color: "#666666",
} },
}, },
}, },
{ {
type: 'value', type: "value",
nameTextStyle: { nameTextStyle: {
color: '#666666' color: "#666666",
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#cdd5e2' color: "#cdd5e2",
} },
}, },
splitLine: { splitLine: {
show: false, show: false,
@ -81,53 +88,58 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#666666' color: "#666666",
} },
} },
} },
], ],
series: [ series: [
{ {
name: '调解成功', name: "调解成功",
type: 'bar', type: "bar",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, {
color: '#29acff' offset: 0,
}, { color: "#29acff",
offset: 1, },
color: '#4bdfff' {
}]), offset: 1,
color: "#4bdfff",
},
]),
barBorderRadius: 6, barBorderRadius: 6,
}, },
}, },
data: [] data: [],
}, },
{ {
name: '调解失败', name: "调解失败",
type: 'bar', type: "bar",
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, {
color: '#3d93f2' offset: 0,
}, { color: "#3d93f2",
offset: 1, },
color: '#5dc1fd' {
}]), offset: 1,
color: "#5dc1fd",
},
]),
barBorderRadius: 6, barBorderRadius: 6,
} },
}, },
data: [] data: [],
}, },
{ {
name: '调解成功率', name: "调解成功率",
type: 'line', type: "line",
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用 yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: false, //平滑曲线显示 smooth: false, //平滑曲线显示
symbol: 'circle', //标记的图形为实心圆 symbol: "circle", //标记的图形为实心圆
symbolSize: 8, //标记的大小 symbolSize: 8, //标记的大小
/*itemStyle: { /*itemStyle: {
normal: { normal: {
@ -137,25 +149,25 @@ export default {
}, },
},*/ },*/
lineStyle: { lineStyle: {
color: '#ffa43a' color: "#ffa43a",
}, },
data: [] data: [],
} },
] ],
} },
} };
}, },
computed: { computed: {
styleObj() { styleObj() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -166,8 +178,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
created() { created() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -175,6 +187,14 @@ export default {
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -220,7 +240,7 @@ export default {
name: optionsSetup.nameX, name: optionsSetup.nameX,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX fontSize: optionsSetup.nameFontSizeX,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
@ -233,23 +253,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorX, color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX fontSize: optionsSetup.fontSizeX,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX, width: optionsSetup.lineWidthX,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineX, show: optionsSetup.isShowSplitLineX,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorX, color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX, width: optionsSetup.splitLineWidthX,
} },
} },
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
@ -268,7 +288,7 @@ export default {
// 别名 // 别名
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorYLeft, color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.nameFontSizeYLeft fontSize: optionsSetup.nameFontSizeYLeft,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
@ -277,26 +297,27 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorYLeft, color: optionsSetup.colorYLeft,
fontSize: optionsSetup.fontSizeYLeft fontSize: optionsSetup.fontSizeYLeft,
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineYLeft, show: optionsSetup.tickLineYLeft,
}, },
axisLine: { axisLine: {
show: optionsSetup.lineYLeft, show: optionsSetup.lineYLeft,
lineStyle: { lineStyle: {
width: optionsSetup.lineWidthYLeft, width: optionsSetup.lineWidthYLeft,
color: optionsSetup.lineColorYLeft color: optionsSetup.lineColorYLeft,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineYLeft, show: optionsSetup.isShowSplitLineYLeft,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorYLeft, color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft, width: optionsSetup.splitLineFontWidthYLeft,
} },
} },
}, },
{ {
type: "value", type: "value",
@ -309,7 +330,7 @@ export default {
// 别名 // 别名
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorYRight, color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.nameFontSizeYRight fontSize: optionsSetup.nameFontSizeYRight,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
@ -318,10 +339,11 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorYRight, color: optionsSetup.colorYRight,
fontSize: optionsSetup.fontSizeYRight fontSize: optionsSetup.fontSizeYRight,
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineYRight, show: optionsSetup.tickLineYRight,
}, },
axisLine: { axisLine: {
@ -329,16 +351,16 @@ export default {
lineStyle: { lineStyle: {
width: optionsSetup.lineWidthYRight, width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight, color: optionsSetup.lineColorYRight,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineYRight, show: optionsSetup.isShowSplitLineYRight,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorYRight, color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight, width: optionsSetup.splitLineFontWidthYRight,
} },
} },
} },
]; ];
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
@ -346,12 +368,12 @@ export default {
setOptionsTooltip() { setOptionsTooltip() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const tooltip = { const tooltip = {
trigger: 'item', trigger: "item",
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -363,7 +385,7 @@ export default {
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true,
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
@ -373,12 +395,11 @@ export default {
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom = optionsSetup.longitudinalPosition;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
@ -388,23 +409,23 @@ export default {
const series = this.options.series; const series = this.options.series;
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值 // 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == '') { if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
series[i].name = name[i]; series[i].name = name[i];
} }
this.options.legend['data'] = name; this.options.legend["data"] = name;
} else { } else {
const arr = legendName.split('|'); const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i]; series[i].name = arr[i];
} }
this.options.legend['data'] = arr this.options.legend["data"] = arr;
} }
}, },
// 数据处理 // 数据处理
setOptionsData() { setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == 'staticData' optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData) ? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
@ -428,30 +449,30 @@ export default {
line[i] = val[i].sales; line[i] = val[i].sales;
} }
const legendName = []; const legendName = [];
legendName.push('调解成功'); legendName.push("调解成功");
legendName.push('调解失败'); legendName.push("调解失败");
legendName.push('调解成功率'); legendName.push("调解成功率");
// x轴 // x轴
this.options.xAxis.data = axis; this.options.xAxis.data = axis;
// series // series
for (const i in series) { for (const i in series) {
if (series[i].type == 'bar') { if (series[i].type == "bar") {
series[i].name = legendName[i]; series[i].name = legendName[i];
series[i].type = 'bar'; series[i].type = "bar";
series[i].label = { series[i].label = {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
position: 'top', position: "top",
distance: optionsSetup.distanceBar, distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar fontWeight: optionsSetup.fontWeightBar,
}; };
series[i].barWidth = optionsSetup.maxWidth; series[i].barWidth = optionsSetup.maxWidth;
series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius; series[i].itemStyle.normal["barBorderRadius"] = optionsSetup.radius;
series[i].itemStyle.normal['color'] = arrColor[i]; series[i].itemStyle.normal["color"] = arrColor[i];
} else if (series[i].type == 'line') { } else if (series[i].type == "line") {
series[i].name = legendName[i]; series[i].name = legendName[i];
series[i].type = 'line'; series[i].type = "line";
series[i].yAxisIndex = 1; series[i].yAxisIndex = 1;
series[i].symbol = optionsSetup.symbol; series[i].symbol = optionsSetup.symbol;
series[i].showSymbol = optionsSetup.markPoint; series[i].showSymbol = optionsSetup.markPoint;
@ -459,36 +480,36 @@ export default {
series[i].smooth = optionsSetup.smoothCurve; series[i].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) { if (optionsSetup.area) {
series[i].areaStyle = { series[i].areaStyle = {
opacity: optionsSetup.areaThickness / 100 opacity: optionsSetup.areaThickness / 100,
}; };
} else { } else {
series[i].areaStyle = { series[i].areaStyle = {
opacity: 0 opacity: 0,
}; };
} }
series[i].itemStyle = { series[i].itemStyle = {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
} },
}; };
series[i].lineStyle = { series[i].lineStyle = {
color: arrColor[i], color: arrColor[i],
width: optionsSetup.lineWidth width: optionsSetup.lineWidth,
}; };
series[i].label = { series[i].label = {
show: optionsSetup.isShowLine, show: optionsSetup.isShowLine,
position: 'top', position: "top",
distance: optionsSetup.distanceLine, distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine fontWeight: optionsSetup.fontWeightLine,
}; };
} }
} }
series[0].data = bar1; series[0].data = bar1;
series[1].data = bar2; series[1].data = bar2;
series[2].data = line; series[2].data = line;
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
@ -504,7 +525,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -522,27 +543,27 @@ export default {
for (const i in val.series) { for (const i in val.series) {
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
const obj = {}; const obj = {};
if (val.series[i].type == 'bar') { if (val.series[i].type == "bar") {
obj.name = val.series[i].name; obj.name = val.series[i].name;
obj.type = val.series[i].type; obj.type = val.series[i].type;
obj.label = { obj.label = {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
position: 'top', position: "top",
distance: optionsSetup.distanceBar, distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar fontWeight: optionsSetup.fontWeightBar,
}; };
obj.barWidth = optionsSetup.maxWidth; obj.barWidth = optionsSetup.maxWidth;
obj.itemStyle = { obj.itemStyle = {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
barBorderRadius: optionsSetup.radius, barBorderRadius: optionsSetup.radius,
} },
}; };
obj.data = val.series[i].data; obj.data = val.series[i].data;
series.push(obj); series.push(obj);
} else if (val.series[i].type == 'line') { } else if (val.series[i].type == "line") {
obj.name = val.series[i].name; obj.name = val.series[i].name;
obj.type = val.series[i].type; obj.type = val.series[i].type;
obj.yAxisIndex = 1; obj.yAxisIndex = 1;
@ -552,41 +573,40 @@ export default {
obj.smooth = optionsSetup.smoothCurve; obj.smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) { if (optionsSetup.area) {
obj.areaStyle = { obj.areaStyle = {
opacity: optionsSetup.areaThickness / 100 opacity: optionsSetup.areaThickness / 100,
}; };
} else { } else {
obj.areaStyle = { obj.areaStyle = {
opacity: 0 opacity: 0,
} };
} }
obj.itemStyle = { obj.itemStyle = {
normal: { normal: {
color: arrColor[i], color: arrColor[i],
} },
}; };
obj.lineStyle = { obj.lineStyle = {
color: arrColor[i], color: arrColor[i],
width: optionsSetup.lineWidth width: optionsSetup.lineWidth,
}; };
obj.label = { obj.label = {
show: optionsSetup.isShowLine, show: optionsSetup.isShowLine,
position: 'top', position: "top",
distance: optionsSetup.distanceLine, distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine fontWeight: optionsSetup.fontWeightLine,
}; };
obj.data = val.series[i].data; obj.data = val.series[i].data;
series.push(obj); series.push(obj);
} }
} }
this.options.series = series; this.options.series = series;
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
} },
}; };
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>

285
report-ui/src/views/bigscreenDesigner/designer/widget/decorate/widgetDecoratePieChart.vue
Unescape Escape View File

@ -1,17 +1,17 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "widgetRotatePieChart", name: "widgetRotatePieChart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -19,112 +19,112 @@ export default {
title: {}, title: {},
series: [ series: [
{ {
name: '最外环', name: "最外环",
type: 'pie', type: "pie",
silent: true, silent: true,
radius: ['98%', '97%'], radius: ["98%", "97%"],
label: { label: {
normal: { normal: {
show: false show: false,
}, },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
show: false, show: false,
}, },
}, },
data: [0] data: [0],
}, },
{ {
name: '外四环', name: "外四环",
type: 'pie', type: "pie",
zlevel: 2, zlevel: 2,
silent: true, silent: true,
radius: ['90%', '91%'], radius: ["90%", "91%"],
startAngle: 50, startAngle: 50,
hoverAnimation: false, hoverAnimation: false,
label: { label: {
normal: { normal: {
show: false show: false,
}, },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
} },
}, },
data: [0] data: [0],
}, },
{ {
name: '里四环', name: "里四环",
type: 'pie', type: "pie",
zlevel: 3, zlevel: 3,
silent: true, silent: true,
radius: ['88%', '87%'], radius: ["88%", "87%"],
label: { label: {
normal: { normal: {
show: false show: false,
}, },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
} },
}, },
data: [0] data: [0],
}, },
{ {
name: '虚线环', name: "虚线环",
type: 'pie', type: "pie",
zlevel: 4, zlevel: 4,
silent: true, silent: true,
radius: ['84%', '83%'], radius: ["84%", "83%"],
label: { label: {
normal: { normal: {
show: false show: false,
}, },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
} },
}, },
data: [0] data: [0],
}, },
{ {
name: '三分环', name: "三分环",
type: 'pie', type: "pie",
zlevel: 5, zlevel: 5,
silent: true, silent: true,
radius: ['80%', '78%'], radius: ["80%", "78%"],
color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"], color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
startAngle: 50, startAngle: 50,
avoidLabelOverlap: false, avoidLabelOverlap: false,
hoverAnimation: false, hoverAnimation: false,
label: { label: {
normal: { normal: {
show: false show: false,
}, },
}, },
data: [50, 20, 40] data: [50, 20, 40],
}, },
{ {
name: "外指标环", name: "外指标环",
type: 'gauge', type: "gauge",
splitNumber: 30, splitNumber: 30,
min: 0, min: 0,
max: 100, max: 100,
radius: '73%', //图表尺寸 radius: "73%", //图表尺寸
center: ['50%', '50%'], center: ["50%", "50%"],
startAngle: 90, startAngle: 90,
endAngle: -269.9999, endAngle: -269.9999,
axisLabel: { axisLabel: {
show: false show: false,
}, },
pointer: { pointer: {
show: 0, show: 0,
@ -134,17 +134,17 @@ export default {
}, },
}, },
{ {
name: '里指标环', name: "里指标环",
type: 'gauge', type: "gauge",
splitNumber: 30, splitNumber: 30,
min: 0, min: 0,
max: 100, max: 100,
radius: '68%', radius: "68%",
center: ['50%', '50%'], center: ["50%", "50%"],
startAngle: 90, startAngle: 90,
endAngle: -269.9999, endAngle: -269.9999,
axisLabel: { axisLabel: {
show: false show: false,
}, },
pointer: { pointer: {
show: 0, show: 0,
@ -154,64 +154,61 @@ export default {
}, },
}, },
{ {
name: '环外环', name: "环外环",
type: 'pie', type: "pie",
zlevel: 20, zlevel: 20,
silent: true, silent: true,
radius: ['60%', '59%'], radius: ["60%", "59%"],
hoverAnimation: false, hoverAnimation: false,
label: { label: {
normal: { normal: {
show: false show: false,
}, },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
} },
}, },
}, },
{ {
name: '中间环形图', name: "中间环形图",
type: 'pie', type: "pie",
radius: ['40%', '55%'], radius: ["40%", "55%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#80ADD2', color: "#80ADD2",
borderColor: '#3D4268', borderColor: "#3D4268",
} },
}, },
label: { label: {
normal: { normal: {
show: false, show: false,
position: 'center', position: "center",
}, },
emphasis: { emphasis: {
show: true, show: true,
textStyle: { textStyle: {
fontSize: '30', fontSize: "30",
fontWeight: 'bold' fontWeight: "bold",
} },
} },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
} },
}, },
data: [ data: [25, 25, 25, 25, 25, 25],
25, 25, 25, 25, 25, 25
]
}, },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {} optionsSetup: {},
} };
}, },
computed: { computed: {
styleObj() { styleObj() {
@ -221,9 +218,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -234,8 +231,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -243,6 +240,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
editorOptions() { editorOptions() {
@ -257,20 +262,20 @@ export default {
}, },
// 颜色设置 // 颜色设置
setColor(color) { setColor(color) {
const nullColor = 'rgba(0,0,0,0)' const nullColor = "rgba(0,0,0,0)";
if (color == "") { if (color == "") {
color = nullColor color = nullColor;
} }
return color return color;
}, },
// 最外外环1 // 最外外环1
setOptionsLastRing() { setOptionsLastRing() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series[0]; const series = this.options.series[0];
if (optionsSetup.isLastRingShow) { if (optionsSetup.isLastRingShow) {
series.data = [0] series.data = [0];
} else { } else {
series.data = '' series.data = "";
} }
const normal = { const normal = {
color: { color: {
@ -286,7 +291,7 @@ export default {
], ],
}, },
}; };
series.itemStyle['normal'] = normal; series.itemStyle["normal"] = normal;
}, },
setRingPie2() { setRingPie2() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -300,23 +305,23 @@ export default {
normal: { normal: {
color: this.setColor(optionsSetup.eightColor), color: this.setColor(optionsSetup.eightColor),
borderWidth: 0, borderWidth: 0,
borderColor: 'rgba(0,0,0,0)' borderColor: "rgba(0,0,0,0)",
} },
} },
}) });
} else { } else {
dataArr.push({ dataArr.push({
name: (i + 1).toString(), name: (i + 1).toString(),
value: 20, value: 20,
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(0,0,0,0)' color: "rgba(0,0,0,0)",
} },
} },
}) });
} }
} }
return dataArr return dataArr;
}, },
// 八分环 // 八分环
setOptionsEightRing() { setOptionsEightRing() {
@ -327,7 +332,7 @@ export default {
setRingPie3() { setRingPie3() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
let dataArr = []; let dataArr = [];
for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) { for (let i = 0; i < optionsSetup.dottedNum * 2; i++) {
if (i % 2 === 0) { if (i % 2 === 0) {
dataArr.push({ dataArr.push({
name: (i + 1).toString(), name: (i + 1).toString(),
@ -336,34 +341,38 @@ export default {
normal: { normal: {
color: this.setColor(optionsSetup.dottedColor), color: this.setColor(optionsSetup.dottedColor),
borderWidth: 0, borderWidth: 0,
borderColor: 'rgba(0,0,0,0)' borderColor: "rgba(0,0,0,0)",
} },
} },
}) });
} else { } else {
dataArr.push({ dataArr.push({
name: (i + 1).toString(), name: (i + 1).toString(),
value: 20, value: 20,
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(0,0,0,0)', color: "rgba(0,0,0,0)",
} },
} },
}) });
} }
} }
return dataArr return dataArr;
}, },
// 虚线环 // 虚线环
setOptionsDottedRing() { setOptionsDottedRing() {
const series = this.options.series; const series = this.options.series;
series[3].data = this.setRingPie3() series[3].data = this.setRingPie3();
}, },
// 三分环 // 三分环
setOptionsThreeRing() { setOptionsThreeRing() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series[4]; const series = this.options.series[4];
series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)] series.color = [
this.setColor(optionsSetup.three1Color),
this.setColor(optionsSetup.three2Color),
this.setColor(optionsSetup.three3Color),
];
}, },
// 外指标环 // 外指标环
setOptionsOutRing() { setOptionsOutRing() {
@ -374,32 +383,30 @@ export default {
lineStyle: { lineStyle: {
width: optionsSetup.outRingWidth, width: optionsSetup.outRingWidth,
shadowBlur: 0, shadowBlur: 0,
color: [ color: [[1, this.setColor(optionsSetup.outRingColor)]],
[1, this.setColor(optionsSetup.outRingColor)] },
]
}
}; };
const axisTick = { const axisTick = {
show: optionsSetup.isOutTickShow, show: optionsSetup.isOutTickShow,
lineStyle: { lineStyle: {
color: this.setColor(optionsSetup.outTickColor), color: this.setColor(optionsSetup.outTickColor),
width: optionsSetup.outTickWidth width: optionsSetup.outTickWidth,
}, },
length: optionsSetup.outTickLength, length: optionsSetup.outTickLength,
splitNumber: optionsSetup.outTickWidth splitNumber: optionsSetup.outTickWidth,
}; };
series[5].splitNumber = optionsSetup.outSplitNum series[5].splitNumber = optionsSetup.outSplitNum;
const splitLine = { const splitLine = {
show: optionsSetup.isOutSplitShow, show: optionsSetup.isOutSplitShow,
length: optionsSetup.outSplitLength, length: optionsSetup.outSplitLength,
lineStyle: { lineStyle: {
color: this.setColor(optionsSetup.outSplitColor), color: this.setColor(optionsSetup.outSplitColor),
width: optionsSetup.outSplitWidth, width: optionsSetup.outSplitWidth,
} },
}; };
series[5].axisLine = axisLine series[5].axisLine = axisLine;
series[5].axisTick = axisTick series[5].axisTick = axisTick;
series[5].splitLine = splitLine series[5].splitLine = splitLine;
}, },
// 里指标环 // 里指标环
setOptionsInRing() { setOptionsInRing() {
@ -410,9 +417,7 @@ export default {
lineStyle: { lineStyle: {
width: optionsSetup.inRingWidth, width: optionsSetup.inRingWidth,
shadowBlur: 0, shadowBlur: 0,
color: [ color: [[1, this.setColor(optionsSetup.inRingColor)]],
[1, this.setColor(optionsSetup.inRingColor)],
],
}, },
}; };
const axisTick = { const axisTick = {
@ -424,61 +429,61 @@ export default {
length: optionsSetup.inTickLength, length: optionsSetup.inTickLength,
splitNumber: optionsSetup.inTickNum, splitNumber: optionsSetup.inTickNum,
}; };
series[6].splitNumber = optionsSetup.inSplitNum series[6].splitNumber = optionsSetup.inSplitNum;
const splitLine = { const splitLine = {
show: optionsSetup.isInSplitShow, show: optionsSetup.isInSplitShow,
length: optionsSetup.inSplitLength, length: optionsSetup.inSplitLength,
lineStyle: { lineStyle: {
color: this.setColor(optionsSetup.inSplitColor), color: this.setColor(optionsSetup.inSplitColor),
width: optionsSetup.inSplitWidth width: optionsSetup.inSplitWidth,
} },
}; };
series[6].axisLine = axisLine series[6].axisLine = axisLine;
series[6].axisTick = axisTick series[6].axisTick = axisTick;
series[6].splitLine = splitLine series[6].splitLine = splitLine;
}, },
// 环外环设置 // 环外环设置
setOptionsRingOnRing() { setOptionsRingOnRing() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series[7]; const series = this.options.series[7];
if (optionsSetup.isRingOnRingShow) { if (optionsSetup.isRingOnRingShow) {
series.data = [0] series.data = [0];
} else { } else {
series.data = '' series.data = "";
} }
const itemStyle = { const itemStyle = {
normal: { normal: {
color: this.setColor(optionsSetup.ringOnRingColor), color: this.setColor(optionsSetup.ringOnRingColor),
} },
} };
series.itemStyle = itemStyle series.itemStyle = itemStyle;
}, },
// 中饼图设置 // 中饼图设置
setOptionsPie() { setOptionsPie() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series[8]; const series = this.options.series[8];
let width = optionsSetup.pieWidth let width = optionsSetup.pieWidth;
const pieWidth = width + "%" const pieWidth = width + "%";
series.radius = [pieWidth, '55%'] series.radius = [pieWidth, "55%"];
let pieBlocks = optionsSetup.pieBlocks let pieBlocks = optionsSetup.pieBlocks;
if (pieBlocks == "six") { if (pieBlocks == "six") {
series.data = [25, 25, 25, 25, 25, 25] series.data = [25, 25, 25, 25, 25, 25];
} else if (pieBlocks == "five") { } else if (pieBlocks == "five") {
series.data = [30, 30, 30, 30, 30] series.data = [30, 30, 30, 30, 30];
} else { } else {
series.data = [40, 40, 40, 40] series.data = [40, 40, 40, 40];
} }
const itemStyle = { const itemStyle = {
normal: { normal: {
color: this.setColor(optionsSetup.pieColor), color: this.setColor(optionsSetup.pieColor),
borderColor: this.setColor(optionsSetup.pieBorderColor), borderColor: this.setColor(optionsSetup.pieBorderColor),
} },
} };
series.itemStyle = itemStyle series.itemStyle = itemStyle;
} },
} },
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

88
report-ui/src/views/bigscreenDesigner/designer/widget/funnel/widgetFunnel.vue
Unescape Escape View File

@ -1,16 +1,17 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetFunnel", name: "WidgetFunnel",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -19,19 +20,19 @@ export default {
title: { title: {
text: "", text: "",
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c}" formatter: "{a} <br/>{b} : {c}",
}, },
legend: { legend: {
x: 'center', x: "center",
y: '92%', y: "92%",
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
series: [ series: [
{ {
@ -44,37 +45,37 @@ export default {
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'inside', position: "inside",
formatter: '{c}', formatter: "{c}",
textStyle: { textStyle: {
color: '#fff', color: "#fff",
fontSize: 14, fontSize: 14,
} },
}, },
emphasis: { emphasis: {
position: 'inside', position: "inside",
formatter: '{b}: {c}' formatter: "{b}: {c}",
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
opacity: 0.8, opacity: 0.8,
borderColor: 'rgba(12, 13, 43, .9)', borderColor: "rgba(12, 13, 43, .9)",
borderWidth: 1, borderWidth: 1,
shadowBlur: 4, shadowBlur: 4,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 0, shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, .6)' shadowColor: "rgba(0, 0, 0, .6)",
} },
}, },
data: [] data: [],
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -85,9 +86,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -98,8 +99,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
created() { created() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -107,6 +108,14 @@ export default {
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -134,15 +143,15 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const normal = { const normal = {
show: optionsSetup.isShow, show: optionsSetup.isShow,
position: 'inside', position: "inside",
formatter: '{c}', formatter: "{c}",
textStyle: { textStyle: {
color: optionsSetup.color, color: optionsSetup.color,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
} },
} };
this.options.series[0].label['normal'] = normal; this.options.series[0].label["normal"] = normal;
}, },
// 标题修改 // 标题修改
setOptionsTitle() { setOptionsTitle() {
@ -174,8 +183,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -187,12 +196,11 @@ export default {
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.right = optionsSetup.lateralPosition; legend.right = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom = optionsSetup.longitudinalPosition;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
@ -235,7 +243,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -245,8 +253,8 @@ export default {
this.options.series[key].data = val; this.options.series[key].data = val;
} }
} }
} },
} },
}; };
</script> </script>

47
report-ui/src/views/bigscreenDesigner/designer/widget/heatmap/widgetHeatmap.vue
Unescape Escape View File

@ -1,10 +1,11 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "widgetHeatmap", name: "widgetHeatmap",
components: {}, components: {},
@ -135,6 +136,14 @@ export default {
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -180,7 +189,7 @@ export default {
name: optionsSetup.nameX, name: optionsSetup.nameX,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX fontSize: optionsSetup.nameFontSizeX,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
@ -193,15 +202,15 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorX, color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX fontSize: optionsSetup.fontSizeX,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX, width: optionsSetup.lineWidthX,
} },
}, },
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
@ -220,7 +229,7 @@ export default {
name: optionsSetup.textNameY, name: optionsSetup.textNameY,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorY, color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY fontSize: optionsSetup.nameFontSizeY,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalY, inverse: optionsSetup.reversalY,
@ -231,15 +240,15 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorY, color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY fontSize: optionsSetup.fontSizeY,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorY, color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY, width: optionsSetup.lineWidthY,
} },
}, },
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
@ -252,9 +261,9 @@ export default {
textStyle: { textStyle: {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} },
} };
this.options.series[0].label = lable; this.options.series[0].label = lable;
}, },
// 边距设置 // 边距设置
@ -265,7 +274,7 @@ export default {
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true,
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
@ -279,7 +288,7 @@ export default {
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize, fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -291,8 +300,8 @@ export default {
visualMap.min = optionsSetup.dataMin; visualMap.min = optionsSetup.dataMin;
visualMap.max = optionsSetup.dataMax; visualMap.max = optionsSetup.dataMax;
visualMap.textStyle = { visualMap.textStyle = {
fontSize : optionsSetup.legendFontSize, fontSize: optionsSetup.legendFontSize,
color : optionsSetup.legendColor color: optionsSetup.legendColor,
}; };
visualMap.inRange.color = optionsSetup.legendColorList.map((x) => { visualMap.inRange.color = optionsSetup.legendColorList.map((x) => {
return x.color; return x.color;
@ -312,8 +321,8 @@ export default {
//去重 //去重
setUnique(arr) { setUnique(arr) {
let newArr = []; let newArr = [];
arr.forEach(item => { arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item); return newArr.includes(item) ? "" : newArr.push(item);
}); });
return newArr; return newArr;
}, },
@ -324,7 +333,7 @@ export default {
for (const i in val) { for (const i in val) {
xAxisList[i] = val[i].axis; xAxisList[i] = val[i].axis;
yAxisList[i] = val[i].yaxis; yAxisList[i] = val[i].yaxis;
data[i] = [val[i].axis,val[i].yaxis,val[i].num] data[i] = [val[i].axis, val[i].yaxis, val[i].num];
} }
xAxisList = this.setUnique(xAxisList); xAxisList = this.setUnique(xAxisList);
yAxisList = this.setUnique(yAxisList); yAxisList = this.setUnique(yAxisList);

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

@ -1,17 +1,18 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetBarCompareChart", name: "WidgetBarCompareChart",
//参考 https://www.makeapie.com/editor.html?c=xOjLyozu2W //参考 https://www.makeapie.com/editor.html?c=xOjLyozu2W
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -22,19 +23,19 @@ export default {
}, },
}, },
title: { title: {
x: 'center', x: "center",
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
}, },
}, },
tooltip: { tooltip: {
show: true, show: true,
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'line', type: "line",
lineStyle: { lineStyle: {
color: '#ffffff', color: "#ffffff",
type: 'dashed', type: "dashed",
}, },
}, },
/*axisPointer: { /*axisPointer: {
@ -50,67 +51,76 @@ export default {
}, },
//边距 //边距
grid: [ grid: [
{// 上 {
// 上
left: 30, left: 30,
right: 20, right: 20,
top: '60px', top: "60px",
containLabel: true, containLabel: true,
bottom: '50%', bottom: "50%",
}, },
{ // 下 {
// 下
left: 30, left: 30,
containLabel: true, containLabel: true,
right: 20, right: 20,
top: '51%', top: "51%",
}, },
], ],
//图例 //图例
legend: { legend: {
textStyle: { textStyle: {
color: '#fff', color: "#fff",
textAlign: 'center' textAlign: "center",
}, },
//itemGap:80, //itemGap:80,
//itemWidth: 0 //itemWidth: 0
}, },
xAxis: [ xAxis: [
{// {
//
gridIndex: 0, gridIndex: 0,
show: true, show: true,
type: 'category', type: "category",
boundaryGap: true, // 居中 boundaryGap: true, // 居中
axisLine: { //x轴线 axisLine: {
//x轴线
show: true, show: true,
lineStyle: { lineStyle: {
color: '#ffffff', color: "#ffffff",
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: true, show: true,
}, },
axisLabel: { // X轴数据 axisLabel: {
// X轴数据
show: true, show: true,
textStyle: { textStyle: {
interval: 0, interval: 0,
color: '#ffffff', color: "#ffffff",
fontSize: 14 fontSize: 14,
} },
}, },
data: [], data: [],
}, },
{// {
//
gridIndex: 1, gridIndex: 1,
show: true, show: true,
type: 'category', type: "category",
position: 'top', position: "top",
boundaryGap: true, // 居中 boundaryGap: true, // 居中
axisLine: { // x轴线 axisLine: {
// x轴线
show: true, show: true,
lineStyle: { lineStyle: {
color: '#ffffff', color: "#ffffff",
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: true, show: true,
}, },
axisLabel: { axisLabel: {
@ -128,24 +138,25 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
fontSize: 14, fontSize: 14,
}, },
}, },
axisLine: { // 轴线 axisLine: {
// 轴线
show: true, show: true,
lineStyle: { lineStyle: {
color: '#ffffff', color: "#ffffff",
}, },
}, },
splitLine: { splitLine: {
show: false, show: false,
lineStyle: { lineStyle: {
color: '#ffffff', color: "#ffffff",
}, },
}, },
axisPointer: { axisPointer: {
snap: true snap: true,
}, },
}, },
{ {
@ -155,84 +166,87 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#ffffff', color: "#ffffff",
fontSize: 14, fontSize: 14,
}, },
}, },
axisLine: { // 轴线 axisLine: {
// 轴线
show: true, show: true,
lineStyle: { lineStyle: {
color: '#ffffff', color: "#ffffff",
}, },
}, },
splitLine: { splitLine: {
show: false, show: false,
lineStyle: { lineStyle: {
color: '#ffffff', color: "#ffffff",
}, },
}, },
axisPointer: { axisPointer: {
snap: true snap: true,
}, },
}, },
], ],
series: [ series: [
{ {
name: '', name: "",
type: 'line', type: "line",
xAxisIndex: 0, xAxisIndex: 0,
yAxisIndex: 0, yAxisIndex: 0,
showSymbol: true,// 标记点 showSymbol: true, // 标记点
symbol: 'circle', symbol: "circle",
symbolSize: 5, symbolSize: 5,
smooth: true, // 曲线，折线 smooth: true, // 曲线，折线
itemStyle: { itemStyle: {
color: '#36c5e7', color: "#36c5e7",
}, },
lineStyle: { lineStyle: {
color: '#36c5e7', color: "#36c5e7",
width: 2, width: 2,
}, },
label: { // 数值 label: {
position: 'top', // 数值
position: "top",
distance: 10, distance: 10,
show: true, show: true,
color: '#36c5e7', color: "#36c5e7",
fontSize: 14, fontSize: 14,
}, },
data: [], data: [],
}, },
{ {
name: '', name: "",
type: 'line', type: "line",
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
showSymbol: true,// 标记点 showSymbol: true, // 标记点
symbol: 'circle', symbol: "circle",
symbolSize: 5, symbolSize: 5,
smooth: true, // 曲线，折线 smooth: true, // 曲线，折线
itemStyle: { itemStyle: {
color: '#e68b55', color: "#e68b55",
}, },
lineStyle: { lineStyle: {
color: '#e68b55', color: "#e68b55",
width: 2, width: 2,
}, },
label: {// 数值 label: {
position: 'bottom', // 数值
position: "bottom",
distance: 10, distance: 10,
show: true, show: true,
color: '#e68b55', color: "#e68b55",
fontSize: 16, fontSize: 16,
}, },
data: [], data: [],
}, },
] ],
}, },
optionsStyle: {}, optionsStyle: {},
optionsData: {}, optionsData: {},
optionsSetup: {}, optionsSetup: {},
flagInter: null flagInter: null,
}; };
}, },
computed: { computed: {
@ -243,9 +257,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -256,8 +270,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -265,6 +279,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -311,48 +333,53 @@ export default {
name: optionsSetup.nameX, // 坐标轴名称 name: optionsSetup.nameX, // 坐标轴名称
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX fontSize: optionsSetup.nameFontSizeX,
}, },
type: 'category', type: "category",
boundaryGap: optionsSetup.boundaryX, // 值居中 boundaryGap: optionsSetup.boundaryX, // 值居中
axisLine: { //x轴线 axisLine: {
//x轴线
show: optionsSetup.lineX, show: optionsSetup.lineX,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineX, show: optionsSetup.tickLineX,
}, },
axisLabel: { // X轴数据 axisLabel: {
// X轴数据
show: true, show: true,
interval: optionsSetup.splitNumberX, interval: optionsSetup.splitNumberX,
textStyle: { textStyle: {
color: optionsSetup.colorX, color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX fontSize: optionsSetup.fontSizeX,
} },
}, },
} };
const xAxis1 = { const xAxis1 = {
gridIndex: 1, gridIndex: 1,
show: optionsSetup.isShowX, show: optionsSetup.isShowX,
type: 'category', type: "category",
position: 'top', position: "top",
boundaryGap: optionsSetup.boundaryX, // 值居中 boundaryGap: optionsSetup.boundaryX, // 值居中
axisLine: { // x轴线 axisLine: {
// x轴线
show: optionsSetup.lineX, show: optionsSetup.lineX,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineX, show: optionsSetup.tickLineX,
}, },
axisLabel: { axisLabel: {
show: false, show: false,
interval: optionsSetup.splitNumberX, interval: optionsSetup.splitNumberX,
}, },
} };
this.options.xAxis[0] = xAxis0; this.options.xAxis[0] = xAxis0;
this.options.xAxis[1] = xAxis1; this.options.xAxis[1] = xAxis1;
}, },
@ -367,7 +394,7 @@ export default {
name: optionsSetup.textNameY, // 坐标轴名称 name: optionsSetup.textNameY, // 坐标轴名称
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorY, color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY fontSize: optionsSetup.nameFontSizeY,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
@ -376,10 +403,12 @@ export default {
fontSize: optionsSetup.fontSizeYTop, fontSize: optionsSetup.fontSizeYTop,
}, },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineYTop, show: optionsSetup.tickLineYTop,
}, },
axisLine: { // 轴线 axisLine: {
// 轴线
show: optionsSetup.lineYTop, show: optionsSetup.lineYTop,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorYTop, color: optionsSetup.lineColorYTop,
@ -393,10 +422,10 @@ export default {
}, },
}, },
axisPointer: { axisPointer: {
snap: true snap: true,
}, },
} };
this.options.yAxis[0] = yAxis this.options.yAxis[0] = yAxis;
}, },
// 下Y轴设置 // 下Y轴设置
setOptionsYBottom() { setOptionsYBottom() {
@ -409,7 +438,7 @@ export default {
name: optionsSetup.textNameY, // 坐标轴名称 name: optionsSetup.textNameY, // 坐标轴名称
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorY, color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY fontSize: optionsSetup.nameFontSizeY,
}, },
inverse: true, // 翻转 inverse: true, // 翻转
axisLabel: { axisLabel: {
@ -419,10 +448,12 @@ export default {
fontSize: optionsSetup.fontSizeYBottom, fontSize: optionsSetup.fontSizeYBottom,
}, },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineYBottom, show: optionsSetup.tickLineYBottom,
}, },
axisLine: { // 轴线 axisLine: {
// 轴线
show: optionsSetup.lineYBottom, show: optionsSetup.lineYBottom,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorYBottom, color: optionsSetup.lineColorYBottom,
@ -436,82 +467,82 @@ export default {
}, },
}, },
axisPointer: { axisPointer: {
snap: true snap: true,
}, },
} };
this.options.yAxis[1] = yAxis this.options.yAxis[1] = yAxis;
}, },
// 数值设定 折线设置 // 数值设定 折线设置
setOptionsTop() { setOptionsTop() {
const optionsSetup = 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) {
series[key].symbol = optionsSetup.symbol series[key].symbol = optionsSetup.symbol;
series[key].showSymbol = optionsSetup.markPoint series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) { if (optionsSetup.area) {
series[key].areaStyle = { series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100 opacity: optionsSetup.areaThickness / 100,
} };
} else { } else {
series[key].areaStyle = { series[key].areaStyle = {
opacity: 0 opacity: 0,
} };
} }
} }
// 数值 // 数值
if (series[0].type == 'line') { if (series[0].type == "line") {
series[0].label = { series[0].label = {
position: 'top', position: "top",
distance: 10, distance: 10,
show: optionsSetup.isShow, show: optionsSetup.isShow,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} };
series[1].label = { series[1].label = {
position: 'bottom', position: "bottom",
distance: 10, distance: 10,
show: optionsSetup.isShow, show: optionsSetup.isShow,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} };
} }
}, },
// tooltip 提示语设置 // tooltip 提示语设置
setOptionsTooltip() { setOptionsTooltip() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
let tooltip = {} let tooltip = {};
if (optionsSetup.tipsType == "line") { if (optionsSetup.tipsType == "line") {
tooltip = { tooltip = {
show: optionsSetup.tipsShow, show: optionsSetup.tipsShow,
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: optionsSetup.tipsType, type: optionsSetup.tipsType,
lineStyle: { lineStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
type: 'dashed', type: "dashed",
}, },
}, },
} };
} else { } else {
tooltip = { tooltip = {
show: optionsSetup.tipsShow, show: optionsSetup.tipsShow,
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: optionsSetup.tipsType, type: optionsSetup.tipsType,
lineStyle: { lineStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
type: 'dashed', type: "dashed",
}, },
crossStyle: { crossStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
} },
}, },
} };
} }
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -519,21 +550,23 @@ export default {
setOptionsGrid() { setOptionsGrid() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const grid = [ const grid = [
{// 上 {
// 上
left: optionsSetup.marginLeft, left: optionsSetup.marginLeft,
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true, containLabel: true,
bottom: '50%', bottom: "50%",
}, },
{ // 下 {
// 下
left: optionsSetup.marginLeft, left: optionsSetup.marginLeft,
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
containLabel: true, containLabel: true,
top: '51%', top: "51%",
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
}, },
] ];
this.options.grid = grid; this.options.grid = grid;
}, },
// 图例操作 // 图例操作
@ -543,39 +576,38 @@ export default {
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom = optionsSetup.longitudinalPosition;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
// 图例名称设置 // 图例名称设置
setOptionsLegendName(name){ setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值 // 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == '') { if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
series[i].name = name[i]; series[i].name = name[i];
} }
this.options.legend['data'] = name; this.options.legend["data"] = name;
}else { } else {
const arr = legendName.split('|'); const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i]; series[i].name = arr[i];
} }
this.options.legend['data'] = arr this.options.legend["data"] = arr;
} }
}, },
// 颜色修改、宽度修改 // 颜色修改、宽度修改
setOptionsColor() { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor; const customColor = optionsSetup.customColor;
const series = this.options.series const series = this.options.series;
const arrColor = []; const arrColor = [];
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color); arrColor.push(customColor[i].color);
@ -584,13 +616,13 @@ export default {
for (const key in series) { for (const key in series) {
const itemStyle = { const itemStyle = {
color: arrColor[key], color: arrColor[key],
} };
const lineStyle = { const lineStyle = {
color: arrColor[key], color: arrColor[key],
width: optionsSetup.lineWidth, width: optionsSetup.lineWidth,
} };
this.options.series[key].itemStyle = itemStyle this.options.series[key].itemStyle = itemStyle;
this.options.series[key].lineStyle = lineStyle this.options.series[key].lineStyle = lineStyle;
} }
}, },
// 数据解析 // 数据解析
@ -600,16 +632,16 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
//去重 //去重
setUnique(arr) { setUnique(arr) {
let newArr = []; let newArr = [];
arr.forEach(item => { arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item); return newArr.includes(item) ? "" : newArr.push(item);
}); });
return newArr; return newArr;
}, },
@ -639,17 +671,17 @@ export default {
} }
arrayList.push({ arrayList.push({
name: yAxisList[i], name: yAxisList[i],
data: data data: data,
}) });
legendName.push(yAxisList[i]); legendName.push(yAxisList[i]);
} }
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;
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; this.options.xAxis[1]["data"] = xAxisList;
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
@ -666,26 +698,26 @@ export default {
}, },
getEchartData(val, optionsSetup) { getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(optionsSetup, res); this.renderingFn(optionsSetup, res);
}); });
}, },
renderingFn(optionsSetup, val) { renderingFn(optionsSetup, val) {
const legendName = []; const legendName = [];
this.options.xAxis[0]['data'] = val.xAxis; this.options.xAxis[0]["data"] = val.xAxis;
this.options.xAxis[1]['data'] = val.xAxis; this.options.xAxis[1]["data"] = val.xAxis;
if (val.series[0].type == "line") { if (val.series[0].type == "line") {
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;
this.options.series[1]['data'] = val.series[1].data; this.options.series[1]["data"] = val.series[1].data;
legendName.push(val.series[0].name); legendName.push(val.series[0].name);
legendName.push(val.series[1].name); legendName.push(val.series[1].name);
} }
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
} },
} },
}; };
</script> </script>
@ -695,5 +727,4 @@ export default {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style> </style>

129
report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
Unescape Escape View File

@ -1,16 +1,17 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetBarStackchart", name: "WidgetBarStackchart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -18,8 +19,8 @@ export default {
grid: {}, grid: {},
legend: { legend: {
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
xAxis: { xAxis: {
type: "category", type: "category",
@ -27,9 +28,9 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -37,26 +38,26 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
series: [ series: [
{ {
data: [], data: [],
name: '', name: "",
type: "line", type: "line",
barGap: "0%", barGap: "0%",
itemStyle: { itemStyle: {
barBorderRadius: null barBorderRadius: null,
} },
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsSetup: {}, optionsSetup: {},
flagInter: null flagInter: null,
}; };
}, },
computed: { computed: {
@ -67,9 +68,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -80,8 +81,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -89,6 +90,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -134,7 +143,7 @@ export default {
name: optionsSetup.nameX, name: optionsSetup.nameX,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX fontSize: optionsSetup.nameFontSizeX,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
@ -147,23 +156,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorX, color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX fontSize: optionsSetup.fontSizeX,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX, width: optionsSetup.lineWidthX,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineX, show: optionsSetup.isShowSplitLineX,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorX, color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX, width: optionsSetup.splitLineWidthX,
} },
} },
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
@ -181,7 +190,7 @@ export default {
name: optionsSetup.textNameY, name: optionsSetup.textNameY,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorY, color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY fontSize: optionsSetup.nameFontSizeY,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalY, inverse: optionsSetup.reversalY,
@ -192,23 +201,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorY, color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY fontSize: optionsSetup.fontSizeY,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorY, color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY, width: optionsSetup.lineWidthY,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineY, show: optionsSetup.isShowSplitLineY,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorY, color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY, width: optionsSetup.splitLineWidthY,
} },
} },
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
@ -218,14 +227,14 @@ export default {
let areaStyle = []; let areaStyle = [];
if (optionsSetup.area) { if (optionsSetup.area) {
areaStyle = { areaStyle = {
opacity: optionsSetup.areaThickness / 100 opacity: optionsSetup.areaThickness / 100,
} };
} else { } else {
areaStyle = { areaStyle = {
opacity: 0 opacity: 0,
} };
} }
return areaStyle return areaStyle;
}, },
// tooltip 提示语设置，鼠标放置显示 // tooltip 提示语设置，鼠标放置显示
setOptionsTooltip() { setOptionsTooltip() {
@ -235,8 +244,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -248,7 +257,7 @@ export default {
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true,
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
@ -259,12 +268,11 @@ export default {
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom = optionsSetup.longitudinalPosition;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
@ -274,17 +282,17 @@ export default {
const series = this.options.series; const series = this.options.series;
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值 // 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == '') { if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
series[i].name = name[i]; series[i].name = name[i];
} }
this.options.legend['data'] = name; this.options.legend["data"] = name;
} else { } else {
const arr = legendName.split('|'); const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i]; series[i].name = arr[i];
} }
this.options.legend['data'] = arr this.options.legend["data"] = arr;
} }
}, },
// 图例颜色修改 // 图例颜色修改
@ -307,16 +315,16 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
//去重 //去重
setUnique(arr) { setUnique(arr) {
let newArr = []; let newArr = [];
arr.forEach(item => { arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item); return newArr.includes(item) ? "" : newArr.push(item);
}); });
return newArr; return newArr;
}, },
@ -379,7 +387,7 @@ export default {
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
}, },
}) });
legendName.push(yAxisList[i]); legendName.push(yAxisList[i]);
} }
this.options.series = series; this.options.series = series;
@ -394,7 +402,7 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
@ -411,7 +419,7 @@ export default {
}, },
getEchartData(val, optionsSetup) { getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(optionsSetup, res); this.renderingFn(optionsSetup, res);
}); });
}, },
@ -467,15 +475,15 @@ export default {
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
}, },
}) });
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
this.options.series = series; this.options.series = series;
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
} },
} },
}; };
</script> </script>
@ -485,5 +493,4 @@ export default {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style> </style>

232
report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetAirBubbleMap.vue
Unescape Escape View File

@ -41,159 +41,159 @@ let geoCoordMap = {
广西壮族自治区: [108.479, 23.1152], 广西壮族自治区: [108.479, 23.1152],
海南省: [110.3893, 19.8516], 海南省: [110.3893, 19.8516],
上海市: [121.4648, 31.2891], 上海市: [121.4648, 31.2891],
香港: [114.173355,22.320048], 香港: [114.173355, 22.320048],
澳门: [113.54909,22.198951] 澳门: [113.54909, 22.198951],
}; };
let data = [ let data = [
{ {
name: "南海诸岛", name: "南海诸岛",
value: 1 value: 1,
}, },
{ {
name: "北京", name: "北京",
value: 524 value: 524,
}, },
{ {
name: "天津", name: "天津",
value: 14 value: 14,
}, },
{ {
name: "上海", name: "上海",
value: 150 value: 150,
}, },
{ {
name: "重庆", name: "重庆",
value: 75 value: 75,
}, },
{ {
name: "河北", name: "河北",
value: 13 value: 13,
}, },
{ {
name: "河南", name: "河南",
value: 83 value: 83,
}, },
{ {
name: "云南", name: "云南",
value: 11 value: 11,
}, },
{ {
name: "辽宁", name: "辽宁",
value: 19 value: 19,
}, },
{ {
name: "黑龙江", name: "黑龙江",
value: 15 value: 15,
}, },
{ {
name: "湖南", name: "湖南",
value: 69 value: 69,
}, },
{ {
name: "安徽", name: "安徽",
value: 260 value: 260,
}, },
{ {
name: "山东", name: "山东",
value: 39 value: 39,
}, },
{ {
name: "新疆", name: "新疆",
value: 4 value: 4,
}, },
{ {
name: "江苏", name: "江苏",
value: 31 value: 31,
}, },
{ {
name: "浙江", name: "浙江",
value: 104 value: 104,
}, },
{ {
name: "江西", name: "江西",
value: 36 value: 36,
}, },
{ {
name: "湖北", name: "湖北",
value: 1052 value: 1052,
}, },
{ {
name: "广西", name: "广西",
value: 33 value: 33,
}, },
{ {
name: "甘肃", name: "甘肃",
value: 347 value: 347,
}, },
{ {
name: "山西", name: "山西",
value: 8 value: 8,
}, },
{ {
name: "内蒙古", name: "内蒙古",
value: 157 value: 157,
}, },
{ {
name: "陕西", name: "陕西",
value: 22 value: 22,
}, },
{ {
name: "吉林", name: "吉林",
value: 4 value: 4,
}, },
{ {
name: "福建", name: "福建",
value: 36 value: 36,
}, },
{ {
name: "贵州", name: "贵州",
value: 39 value: 39,
}, },
{ {
name: "广东", name: "广东",
value: 996 value: 996,
}, },
{ {
name: "青海", name: "青海",
value: 27 value: 27,
}, },
{ {
name: "西藏", name: "西藏",
value: 31 value: 31,
}, },
{ {
name: "四川", name: "四川",
value: 46 value: 46,
}, },
{ {
name: "宁夏", name: "宁夏",
value: 16 value: 16,
}, },
{ {
name: "海南", name: "海南",
value: 22 value: 22,
}, },
{ {
name: "台湾", name: "台湾",
value: 6 value: 6,
}, },
{ {
name: "香港", name: "香港",
value: 2 value: 2,
}, },
{ {
name: "澳门", name: "澳门",
value: 9 value: 9,
} },
]; ];
let convertData = function(data) { let convertData = function (data) {
let res = []; let res = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
let geoCoord = geoCoordMap[data[i].name]; let geoCoord = geoCoordMap[data[i].name];
if (geoCoord) { if (geoCoord) {
res.push({ res.push({
name: data[i].name, name: data[i].name,
value: geoCoord.concat(data[i].value) value: geoCoord.concat(data[i].value),
}); });
} }
} }
@ -203,26 +203,26 @@ let max = 6000,
min = 10; min = 10;
let maxSize4Pin = 100, let maxSize4Pin = 100,
minSize4Pin = 20; minSize4Pin = 20;
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "widgetAirBubbleMap", name: "widgetAirBubbleMap",
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
options: { options: {
//backgroundColor: '#0F1C3C', //backgroundColor: '#0F1C3C',
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: function (params) { formatter: function (params) {
if (params.value.length >1 ) { if (params.value.length > 1) {
return params.data.name + "" + params.data.value[2]; return params.data.name + "" + params.data.value[2];
} else { } else {
return params.name; return params.name;
} }
} },
}, },
geo: { geo: {
map: "china", map: "china",
@ -230,8 +230,8 @@ export default {
roam: false, roam: false,
label: { label: {
emphasis: { emphasis: {
show: false show: false,
} },
}, },
layoutSize: "80%", layoutSize: "80%",
itemStyle: { itemStyle: {
@ -244,21 +244,21 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: "#00F6FF" color: "#00F6FF",
}, },
{ {
offset: 1, offset: 1,
color: "#53D9FF" color: "#53D9FF",
} },
], ],
false false
), ),
borderWidth: 3, borderWidth: 3,
shadowColor: "rgba(10,76,139,1)", shadowColor: "rgba(10,76,139,1)",
shadowOffsetY: 0, shadowOffsetY: 0,
shadowBlur: 60 shadowBlur: 60,
} },
} },
}, },
series: [ series: [
{ {
@ -271,11 +271,11 @@ export default {
position: "right", position: "right",
show: true, show: true,
color: "#53D9FF", color: "#53D9FF",
fontSize: 20 fontSize: 20,
}, },
emphasis: { emphasis: {
show: true show: true,
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
@ -288,16 +288,16 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#073684" // 0% 处的颜色 color: "#073684", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "#061E3D" // 100% 处的颜色 color: "#061E3D", // 100% 处的颜色
} },
] ],
}, },
borderColor: "#215495", borderColor: "#215495",
borderWidth: 1 borderWidth: 1,
}, },
//鼠标放置颜色加深 //鼠标放置颜色加深
emphasis: { emphasis: {
@ -309,23 +309,23 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#073684" // 0% 处的颜色 color: "#073684", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "#2B91B7" // 100% 处的颜色 color: "#2B91B7", // 100% 处的颜色
} },
] ],
} },
} },
}, },
data: data data: data,
}, },
{ {
type: "effectScatter", type: "effectScatter",
coordinateSystem: "geo", coordinateSystem: "geo",
rippleEffect: { rippleEffect: {
brushType: "stroke" brushType: "stroke",
}, },
showEffectOn: "render", showEffectOn: "render",
itemStyle: { itemStyle: {
@ -339,20 +339,20 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "rgba(5,80,151,0.2)" color: "rgba(5,80,151,0.2)",
}, },
{ {
offset: 0.8, offset: 0.8,
color: "rgba(5,80,151,0.8)" color: "rgba(5,80,151,0.8)",
}, },
{ {
offset: 1, offset: 1,
color: "rgba(0,108,255,0.7)" color: "rgba(0,108,255,0.7)",
} },
], ],
global: false global: false,
} },
} },
}, },
label: { label: {
normal: { normal: {
@ -360,19 +360,19 @@ export default {
color: "#fff", color: "#fff",
fontWeight: "bold", fontWeight: "bold",
position: "inside", position: "inside",
formatter: function(para) { formatter: function (para) {
return "{cnNum|" + para.data.value[2] + "}"; return "{cnNum|" + para.data.value[2] + "}";
}, },
rich: { rich: {
cnNum: { cnNum: {
fontSize: 13, fontSize: 13,
color: "#D4EEFF" color: "#D4EEFF",
} },
} },
} },
}, },
symbol: "circle", symbol: "circle",
symbolSize: function(val) { symbolSize: function (val) {
if (val[2] == 0) { if (val[2] == 0) {
return 0; return 0;
} }
@ -384,14 +384,14 @@ export default {
); );
}, },
data: convertData(data), data: convertData(data),
zlevel: 1 zlevel: 1,
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -402,9 +402,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -415,8 +415,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -424,6 +424,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -465,7 +473,7 @@ export default {
show: optionsSetup.isShowMap, show: optionsSetup.isShowMap,
color: optionsSetup.fontTextColor, color: optionsSetup.fontTextColor,
fontSize: optionsSetup.fontTextSize, fontSize: optionsSetup.fontTextSize,
fontWeight: optionsSetup.fontTextWeight fontWeight: optionsSetup.fontTextWeight,
}; };
label["normal"] = normal; label["normal"] = normal;
}, },
@ -482,16 +490,16 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: optionsSetup.font0PreColor // 0% 处的颜色 color: optionsSetup.font0PreColor, // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: optionsSetup.font100PreColor // 100% 处的颜色 color: optionsSetup.font100PreColor, // 100% 处的颜色
} },
] ],
}, },
borderColor: "#215495", borderColor: "#215495",
borderWidth: 1 borderWidth: 1,
}; };
//鼠标放置颜色加深 //鼠标放置颜色加深
const emphasis = { const emphasis = {
@ -503,14 +511,14 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#073684" // 0% 处的颜色 color: "#073684", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: optionsSetup.fontHighlightColor // 100% 处的颜色 color: optionsSetup.fontHighlightColor, // 100% 处的颜色
} },
] ],
} },
}; };
itemStyle["normal"] = normal; itemStyle["normal"] = normal;
itemStyle["emphasis"] = emphasis; itemStyle["emphasis"] = emphasis;
@ -535,16 +543,16 @@ export default {
color: "#fff", color: "#fff",
fontWeight: "bold", fontWeight: "bold",
position: "inside", position: "inside",
formatter: function(para) { formatter: function (para) {
return "{cnNum|" + para.data.value[2] + "}"; return "{cnNum|" + para.data.value[2] + "}";
}, },
rich: { rich: {
cnNum: { cnNum: {
fontSize: optionsSetup.fontDataSize, fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor, color: optionsSetup.fontDataColor,
fontWeight: optionsSetup.fontDataWeight fontWeight: optionsSetup.fontDataWeight,
} },
} },
}; };
const data = convertData(val); const data = convertData(val);
this.options.series[1]["data"] = data; this.options.series[1]["data"] = data;
@ -563,7 +571,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -576,22 +584,22 @@ export default {
color: "#fff", color: "#fff",
fontWeight: "bold", fontWeight: "bold",
position: "inside", position: "inside",
formatter: function(para) { formatter: function (para) {
return "{cnNum|" + para.data.value[2] + "}"; return "{cnNum|" + para.data.value[2] + "}";
}, },
rich: { rich: {
cnNum: { cnNum: {
fontSize: optionsSetup.fontDataSize, fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor, color: optionsSetup.fontDataColor,
fontWeight: optionsSetup.fontDataWeight fontWeight: optionsSetup.fontDataWeight,
} },
} },
}; };
const data = convertData(val); const data = convertData(val);
this.options.series[1]["data"] = data; this.options.series[1]["data"] = data;
label["normal"] = normal; label["normal"] = normal;
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

179
report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue
Unescape Escape View File

@ -1,12 +1,13 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
import "echarts/map/js/china.js"; import "echarts/map/js/china.js";
import echarts from "echarts"; import echarts from "echarts";
import {conversionCity} from '@/utils/china'; import { conversionCity } from "@/utils/china";
/*let geoCoordMap = { /*let geoCoordMap = {
上海市: [121.4648, 31.2891], 上海市: [121.4648, 31.2891],
东莞市: [113.8953, 22.901], 东莞市: [113.8953, 22.901],
@ -130,7 +131,7 @@ export default {
name: "widgetLineMap", name: "widgetLineMap",
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -138,38 +139,44 @@ export default {
title: { title: {
left: "center", left: "center",
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: function (params, ticket, callback) { formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") { if (params.seriesType == "effectScatter") {
return "线路：" + params.data.name + "" + params.data.value[2]; return "线路：" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") { } else if (params.seriesType == "lines") {
return params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value; return (
params.data.fromName +
">" +
params.data.toName +
"<br />" +
params.data.value
);
} else { } else {
return params.name; return params.name;
} }
} },
}, },
legend: { legend: {
show: true, show: true,
orient: 'vertical', orient: "vertical",
top: 'bottom', top: "bottom",
left: 'right', left: "right",
textStyle: { textStyle: {
color: '#fff' color: "#fff",
}, },
selectedMode: 'multiple', selectedMode: "multiple",
}, },
geo: { geo: {
map: "china", map: "china",
label: { label: {
emphasis: { emphasis: {
show: true, show: true,
color: "white" color: "white",
} },
}, },
roam: true, roam: true,
itemStyle: { itemStyle: {
@ -179,8 +186,8 @@ export default {
borderWidth: 1, borderWidth: 1,
}, },
emphasis: { emphasis: {
areaColor: "#2a333d" areaColor: "#2a333d",
} },
}, },
}, },
series: [ series: [
@ -193,97 +200,97 @@ export default {
period: 6, period: 6,
trailLength: 0.7, trailLength: 0.7,
color: "#fff", color: "#fff",
symbolSize: 3 symbolSize: 3,
}, },
lineStyle: { lineStyle: {
normal: { normal: {
color: '#a6c84c', color: "#a6c84c",
width: 0, width: 0,
curveness: 0.2 curveness: 0.2,
} },
}, },
data: [], data: [],
}, },
{ {
type: "lines", type: "lines",
zlevel: 2, zlevel: 2,
symbol: ['none', 'arrow'], symbol: ["none", "arrow"],
symbolSize: 10, symbolSize: 10,
effect: { effect: {
show: true, show: true,
period: 4, period: 4,
trailLength: 0, trailLength: 0,
symbol: 'arrow', symbol: "arrow",
symbolSize: 5 symbolSize: 5,
}, },
lineStyle: { lineStyle: {
normal: { normal: {
// 颜色+ 线条 // 颜色+ 线条
color: '#ffa022', color: "#ffa022",
width: 1, width: 1,
opacity: 0.4, opacity: 0.4,
curveness: 0.2 curveness: 0.2,
} },
}, },
data: [], data: [],
}, },
{ {
// 起点 // 起点
//name: tempData[0], //name: tempData[0],
type: 'effectScatter', type: "effectScatter",
coordinateSystem: 'geo', coordinateSystem: "geo",
zlevel: 2, zlevel: 2,
rippleEffect: { rippleEffect: {
brushType: 'stroke' brushType: "stroke",
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: "right",
formatter: '{b}', formatter: "{b}",
fontSize: 22, fontSize: 22,
} },
}, },
// 点的大小 // 点的大小
symbolSize: 10, symbolSize: 10,
itemStyle: { itemStyle: {
normal: { normal: {
// 地图点颜色 // 地图点颜色
color: '#46bee9' color: "#46bee9",
} },
}, },
data: [], data: [],
}, },
{ {
// 终点 // 终点
//name: tempData[0], //name: tempData[0],
type: 'effectScatter', type: "effectScatter",
coordinateSystem: 'geo', coordinateSystem: "geo",
zlevel: 2, zlevel: 2,
rippleEffect: { rippleEffect: {
brushType: 'stroke' brushType: "stroke",
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'right', position: "right",
formatter: '{b}', formatter: "{b}",
fontSize: 22, fontSize: 22,
} },
}, },
// 点的大小 // 点的大小
symbolSize: 10, symbolSize: 10,
itemStyle: { itemStyle: {
normal: { normal: {
// 地图点颜色 // 地图点颜色
color: '#46bee9' color: "#46bee9",
} },
}, },
data: [], data: [],
}, },
] ],
}, },
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -294,9 +301,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -306,8 +313,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
created() { created() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -316,6 +323,14 @@ export default {
}, },
mounted() { mounted() {
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
convertData(data) { convertData(data) {
@ -326,14 +341,12 @@ export default {
let targetCoord = geoCoordMap[dataItem.target]; let targetCoord = geoCoordMap[dataItem.target];
if (sourceCoord && targetCoord) { if (sourceCoord && targetCoord) {
res.push({ res.push({
fromName: dataItem.source, fromName: dataItem.source,
toName: dataItem.target, toName: dataItem.target,
coords: [sourceCoord, targetCoord], coords: [sourceCoord, targetCoord],
value: dataItem.value, value: dataItem.value,
} });
)
} }
;
} }
return res; return res;
}, },
@ -369,12 +382,12 @@ export default {
this.options.title = title; this.options.title = title;
}, },
// 起点设置 // 起点设置
setOptionsSource(){ setOptionsSource() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series[2]; const series = this.options.series[2];
const normal = { const normal = {
show: optionsSetup.isShowSource, show: optionsSetup.isShowSource,
position: 'right', position: "right",
color: optionsSetup.sourceFontTextColor, color: optionsSetup.sourceFontTextColor,
fontSize: optionsSetup.sourceFontTextSize, fontSize: optionsSetup.sourceFontTextSize,
fontWeight: optionsSetup.sourceFontTextWeight, fontWeight: optionsSetup.sourceFontTextWeight,
@ -382,19 +395,19 @@ export default {
const itemStyle = { const itemStyle = {
normal: { normal: {
color: optionsSetup.sourcePointColor, color: optionsSetup.sourcePointColor,
} },
}; };
series.symbolSize = optionsSetup.sourceSymbolSize; series.symbolSize = optionsSetup.sourceSymbolSize;
series.label.normal = normal; series.label.normal = normal;
series.itemStyle = itemStyle; series.itemStyle = itemStyle;
}, },
// 终点设置 // 终点设置
setOptionsTarget(){ setOptionsTarget() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series[3]; const series = this.options.series[3];
const normal = { const normal = {
show: optionsSetup.isShowTarget, show: optionsSetup.isShowTarget,
position: 'right', position: "right",
color: optionsSetup.targetFontTextColor, color: optionsSetup.targetFontTextColor,
fontSize: optionsSetup.targetFontTextSize, fontSize: optionsSetup.targetFontTextSize,
fontWeight: optionsSetup.targetFontTextWeight, fontWeight: optionsSetup.targetFontTextWeight,
@ -402,14 +415,14 @@ export default {
const itemStyle = { const itemStyle = {
normal: { normal: {
color: optionsSetup.targetPointColor, color: optionsSetup.targetPointColor,
} },
}; };
series.symbolSize = optionsSetup.targetSymbolSize; series.symbolSize = optionsSetup.targetSymbolSize;
series.label.normal = normal; series.label.normal = normal;
series.itemStyle = itemStyle; series.itemStyle = itemStyle;
}, },
// 图标设置 // 图标设置
setOptionsSymbol(){ setOptionsSymbol() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series[1]; const series = this.options.series[1];
const effect = { const effect = {
@ -420,22 +433,22 @@ export default {
symbolSize: optionsSetup.symbolSize, symbolSize: optionsSetup.symbolSize,
color: optionsSetup.symbolColor, color: optionsSetup.symbolColor,
}; };
series['effect'] = effect; series["effect"] = effect;
}, },
setSymbol(optionsSetup) { setSymbol(optionsSetup) {
let symbol; let symbol;
if (optionsSetup.symbol == 'plane') { if (optionsSetup.symbol == "plane") {
symbol = planePath; symbol = planePath;
} else { } else {
symbol = "arrow"; symbol = "arrow";
} }
return symbol; return symbol;
}, },
setPeriod(optionsSetup){ setPeriod(optionsSetup) {
let period; let period;
if (optionsSetup.symbol == 'plane') { if (optionsSetup.symbol == "plane") {
period = optionsSetup.symbolPeriod - 1; period = optionsSetup.symbolPeriod - 1;
}else { } else {
period = optionsSetup.symbolPeriod; period = optionsSetup.symbolPeriod;
} }
return period; return period;
@ -450,10 +463,10 @@ export default {
color: optionsSetup.lineColor, color: optionsSetup.lineColor,
width: optionsSetup.lineWidth, width: optionsSetup.lineWidth,
opacity: 0.4, opacity: 0.4,
curveness: 0.2 curveness: 0.2,
} },
}; };
series['lineStyle'] = lineStyle; series["lineStyle"] = lineStyle;
}, },
// 地图颜色设置 // 地图颜色设置
setOptionsColor() { setOptionsColor() {
@ -467,7 +480,7 @@ export default {
emphasis: { emphasis: {
// 地图块颜色 // 地图块颜色
areaColor: optionsSetup.highlightColor, areaColor: optionsSetup.highlightColor,
} },
}; };
this.options.geo["itemStyle"] = itemStyle; this.options.geo["itemStyle"] = itemStyle;
}, },
@ -486,16 +499,16 @@ export default {
if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) { if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
return { return {
name: dataItem.source, name: dataItem.source,
value: geoCoordMap[dataItem.source].concat([dataItem.value]) value: geoCoordMap[dataItem.source].concat([dataItem.value]),
} };
} }
}); });
series[3]["data"] = val.map(function (dataItem) { series[3]["data"] = val.map(function (dataItem) {
if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) { if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
return { return {
name: dataItem.target, name: dataItem.target,
value: geoCoordMap[dataItem.target].concat([dataItem.value]) value: geoCoordMap[dataItem.target].concat([dataItem.value]),
} };
} }
}); });
}, },
@ -512,7 +525,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -524,20 +537,20 @@ export default {
if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) { if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
return { return {
name: dataItem.source, name: dataItem.source,
value: geoCoordMap[dataItem.source].concat([dataItem.value]) value: geoCoordMap[dataItem.source].concat([dataItem.value]),
} };
} }
}); });
series[3]["data"] = val.map(function (dataItem) { series[3]["data"] = val.map(function (dataItem) {
if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) { if (geoCoordMap[dataItem.source] && geoCoordMap[dataItem.target]) {
return { return {
name: dataItem.target, name: dataItem.target,
value: geoCoordMap[dataItem.target].concat([dataItem.value]) value: geoCoordMap[dataItem.target].concat([dataItem.value]),
} };
} }
}); });
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

114
report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetGauge.vue
Unescape Escape View File

@ -1,25 +1,25 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import echarts from "echarts"; import echarts from "echarts";
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetGauge", name: "WidgetGauge",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
options: { options: {
series: [ series: [
{ {
type: 'gauge', type: "gauge",
z: 100, z: 100,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -30,15 +30,15 @@ export default {
new echarts.graphic.LinearGradient(0, 1, 1, 0, [ new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{ {
offset: 0, offset: 0,
color: 'rgba(0, 237, 3,0.1)', color: "rgba(0, 237, 3,0.1)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: 'rgba(0, 237, 3,0.6)', color: "rgba(0, 237, 3,0.6)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(0, 237, 3,1)', color: "rgba(0, 237, 3,1)",
}, },
]), ]),
], ],
@ -47,15 +47,15 @@ export default {
new echarts.graphic.LinearGradient(0, 1, 1, 0, [ new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{ {
offset: 0, offset: 0,
color: 'rgba(255, 184, 0,0.1)', color: "rgba(255, 184, 0,0.1)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: 'rgba(255, 184, 0,0.6)', color: "rgba(255, 184, 0,0.6)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(255, 184, 0,1)', color: "rgba(255, 184, 0,1)",
}, },
]), ]),
], ],
@ -64,15 +64,15 @@ export default {
new echarts.graphic.LinearGradient(0, 1, 1, 0, [ new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{ {
offset: 0, offset: 0,
color: 'rgba(175, 36, 74,0.1)', color: "rgba(175, 36, 74,0.1)",
}, },
{ {
offset: 0.5, offset: 0.5,
color: 'rgba(255, 36, 74,0.6)', color: "rgba(255, 36, 74,0.6)",
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(255, 36, 74,1)', color: "rgba(255, 36, 74,1)",
}, },
]), ]),
], ],
@ -81,7 +81,7 @@ export default {
}, },
pointer: { pointer: {
itemStyle: { itemStyle: {
color: 'auto', color: "auto",
}, },
}, },
axisTick: { axisTick: {
@ -89,7 +89,7 @@ export default {
distance: 0, distance: 0,
length: 10, length: 10,
lineStyle: { lineStyle: {
color: 'auto', color: "auto",
width: 2, width: 2,
}, },
}, },
@ -98,20 +98,20 @@ export default {
distance: 0, distance: 0,
length: 14, length: 14,
lineStyle: { lineStyle: {
color: 'auto', color: "auto",
width: 4, width: 4,
}, },
}, },
axisLabel: { axisLabel: {
show: true, show: true,
color: 'white', color: "white",
distance: 2, distance: 2,
fontSize: 10, fontSize: 10,
}, },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
formatter: '{value} %', formatter: "{value} %",
color: 'white', color: "white",
fontSize: 18, fontSize: 18,
}, },
data: [ data: [
@ -125,7 +125,7 @@ export default {
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -136,9 +136,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -149,8 +149,8 @@ export default {
this.optionsSetup = val.setup; // 样式 this.optionsSetup = val.setup; // 样式
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
created() { created() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -158,16 +158,24 @@ export default {
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
editorOptions() { editorOptions() {
this.setOptions() this.setOptions();
this.setOptionsData() this.setOptionsData();
}, },
setOptions() { setOptions() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
if (series[0].type == 'gauge') { if (series[0].type == "gauge") {
const axisLine = { const axisLine = {
show: optionsSetup.ringShow, show: optionsSetup.ringShow,
lineStyle: { lineStyle: {
@ -226,28 +234,28 @@ export default {
], ],
], ],
}, },
} };
const axisTick = { const axisTick = {
show: optionsSetup.tickShow, show: optionsSetup.tickShow,
distance: optionsSetup.tickDistance, distance: optionsSetup.tickDistance,
length: optionsSetup.tickLength, length: optionsSetup.tickLength,
lineStyle: { lineStyle: {
color: 'auto', color: "auto",
width: optionsSetup.tickWidth, width: optionsSetup.tickWidth,
}, },
} };
const splitLine = { const splitLine = {
show: optionsSetup.splitShow, show: optionsSetup.splitShow,
distance: optionsSetup.splitDistance, distance: optionsSetup.splitDistance,
length: optionsSetup.splitLength, length: optionsSetup.splitLength,
lineStyle: { lineStyle: {
color: 'auto', color: "auto",
width: optionsSetup.splitWidth, width: optionsSetup.splitWidth,
}, },
} };
series[0].axisLine = axisLine series[0].axisLine = axisLine;
series[0].axisTick = axisTick series[0].axisTick = axisTick;
series[0].splitLine = splitLine series[0].splitLine = splitLine;
} }
}, },
setOptionsData() { setOptionsData() {
@ -259,21 +267,21 @@ export default {
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
const num = val[0]['num']; const num = val[0]["num"];
const data = [ const data = [
{ {
value: num value: num,
} },
] ];
const detail = { const detail = {
valueAnimation: true, valueAnimation: true,
formatter: '{value} %', formatter: "{value} %",
color: optionsSetup.labelColor, color: optionsSetup.labelColor,
fontSize: optionsSetup.labelFontSize, fontSize: optionsSetup.labelFontSize,
fontWeight: optionsSetup.labelFontWeight, fontWeight: optionsSetup.labelFontWeight,
} };
series[0].data = data series[0].data = data;
series[0].detail = detail series[0].detail = detail;
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -288,7 +296,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -297,20 +305,20 @@ export default {
const series = this.options.series; const series = this.options.series;
const data = [ const data = [
{ {
value: val[0].value value: val[0].value,
} },
] ];
const detail = { const detail = {
valueAnimation: true, valueAnimation: true,
formatter: '{value} %', formatter: "{value} %",
color: optionsSetup.labelColor, color: optionsSetup.labelColor,
fontSize: optionsSetup.labelFontSize, fontSize: optionsSetup.labelFontSize,
fontWeight: optionsSetup.labelFontWeight, fontWeight: optionsSetup.labelFontWeight,
} };
series[0].data = data series[0].data = data;
series[0].detail = detail series[0].detail = detail;
} },
} },
}; };
</script> </script>

179
report-ui/src/views/bigscreenDesigner/designer/widget/percent/widgetPiePercentageChart.vue
Unescape Escape View File

@ -5,13 +5,14 @@
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
let per = 60; let per = 60;
export default { export default {
name: "widgetPiePercentageChart", //百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl name: "widgetPiePercentageChart", //百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -25,14 +26,14 @@ export default {
rich: { rich: {
nums: { nums: {
fontSize: 60, fontSize: 60,
color: "#29EEF3" color: "#29EEF3",
}, },
percent: { percent: {
fontSize: 30, fontSize: 30,
color: "#29EEF3" color: "#29EEF3",
} },
} },
} },
}, },
legend: { legend: {
type: "plain", type: "plain",
@ -43,27 +44,27 @@ export default {
data: [ data: [
{ {
name: "1", name: "1",
icon: "circle" icon: "circle",
}, },
{ {
name: "2", name: "2",
icon: "circle" icon: "circle",
}, },
{ {
name: "3", name: "3",
icon: "circle" icon: "circle",
}, },
{ {
name: "4", name: "4",
icon: "circle" icon: "circle",
} },
], ],
textStyle: { textStyle: {
color: "white", color: "white",
fontSize: 16, fontSize: 16,
padding: [10, 1, 10, 0] padding: [10, 1, 10, 0],
}, },
selectedMode: false selectedMode: false,
}, },
series: [ series: [
{ {
@ -78,17 +79,17 @@ export default {
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: ((0 + this.angle) * Math.PI) / 180, startAngle: ((0 + this.angle) * Math.PI) / 180,
endAngle: ((90 + this.angle) * Math.PI) / 180 endAngle: ((90 + this.angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#0CD3DB", stroke: "#0CD3DB",
fill: "transparent", fill: "transparent",
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; };
}, },
data: [0] data: [0],
}, },
{ {
//name: '环2', //name: '环2',
@ -102,17 +103,17 @@ export default {
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: ((180 + this.angle) * Math.PI) / 180, startAngle: ((180 + this.angle) * Math.PI) / 180,
endAngle: ((270 + this.angle) * Math.PI) / 180 endAngle: ((270 + this.angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#0CD3DB", stroke: "#0CD3DB",
fill: "transparent", fill: "transparent",
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; };
}, },
data: [0] data: [0],
}, },
{ {
//name: '环3', //name: '环3',
@ -126,17 +127,17 @@ export default {
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: ((270 + -this.angle) * Math.PI) / 180, startAngle: ((270 + -this.angle) * Math.PI) / 180,
endAngle: ((40 + -this.angle) * Math.PI) / 180 endAngle: ((40 + -this.angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#0CD3DB", stroke: "#0CD3DB",
fill: "transparent", fill: "transparent",
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; };
}, },
data: [0] data: [0],
}, },
{ {
//name: '环4', //name: '环4',
@ -150,17 +151,17 @@ export default {
cy: api.getHeight() / 2, cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: ((90 + -this.angle) * Math.PI) / 180, startAngle: ((90 + -this.angle) * Math.PI) / 180,
endAngle: ((220 + -this.angle) * Math.PI) / 180 endAngle: ((220 + -this.angle) * Math.PI) / 180,
}, },
style: { style: {
stroke: "#0CD3DB", stroke: "#0CD3DB",
fill: "transparent", fill: "transparent",
lineWidth: 1.5 lineWidth: 1.5,
}, },
silent: true silent: true,
}; };
}, },
data: [0] data: [0],
}, },
{ {
//name: '绿点1', //name: '绿点1',
@ -176,16 +177,16 @@ export default {
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#0CD3DB", //粉 stroke: "#0CD3DB", //粉
fill: "#0CD3DB" fill: "#0CD3DB",
}, },
silent: true silent: true,
}; };
}, },
data: [0] data: [0],
}, },
{ {
//name: '绿点2', //name: '绿点2',
@ -201,16 +202,16 @@ export default {
shape: { shape: {
cx: point.x, cx: point.x,
cy: point.y, cy: point.y,
r: 4 r: 4,
}, },
style: { style: {
stroke: "#0CD3DB", //绿 stroke: "#0CD3DB", //绿
fill: "#0CD3DB" fill: "#0CD3DB",
}, },
silent: true silent: true,
}; };
}, },
data: [0] data: [0],
}, },
{ {
//name: '圆环', //name: '圆环',
@ -223,8 +224,8 @@ export default {
zlevel: 0, zlevel: 0,
label: { label: {
normal: { normal: {
position: "center" position: "center",
} },
}, },
data: [ data: [
{ {
@ -237,33 +238,33 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "#4FADFD" // 0% 处的颜色 color: "#4FADFD", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "#28E8FA" // 100% 处的颜色 color: "#28E8FA", // 100% 处的颜色
} },
] ],
} },
} },
} },
}, },
{ {
value: 100 - per, value: 100 - per,
name: "", name: "",
label: { label: {
normal: { normal: {
show: false show: false,
} },
}, },
//剩余圆环颜色 //剩余圆环颜色
itemStyle: { itemStyle: {
normal: { normal: {
color: "#173164" color: "#173164",
} },
} },
} },
] ],
}, },
{ {
name: "percent", name: "percent",
@ -275,42 +276,42 @@ export default {
splitNumber: 8, splitNumber: 8,
hoverAnimation: true, hoverAnimation: true,
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
length: 15, length: 15,
lineStyle: { lineStyle: {
width: 5, width: 5,
color: "#061740" color: "#061740",
} },
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
pointer: { pointer: {
show: false show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
opacity: 0 opacity: 0,
} },
}, },
detail: { detail: {
show: false show: false,
}, },
data: [ data: [
{ {
value: 0, value: 0,
name: "" name: "",
} },
] ],
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -321,9 +322,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -334,8 +335,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
created() { created() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -343,6 +344,14 @@ export default {
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
mounted() { mounted() {
/* setInterval(() => { /* setInterval(() => {
@ -357,7 +366,7 @@ export default {
let y1 = y0 + r * Math.sin((x * Math.PI) / 180); let y1 = y0 + r * Math.sin((x * Math.PI) / 180);
return { return {
x: x1, x: x1,
y: y1 y: y1,
}; };
}, },
editorOptions() { editorOptions() {
@ -376,13 +385,13 @@ export default {
nums: { nums: {
fontSize: optionsSetup.textNumFontSize, fontSize: optionsSetup.textNumFontSize,
color: optionsSetup.textNumColor, color: optionsSetup.textNumColor,
fontWeight: optionsSetup.textNumFontWeight fontWeight: optionsSetup.textNumFontWeight,
}, },
percent: { percent: {
fontSize: optionsSetup.textPerFontSize, fontSize: optionsSetup.textPerFontSize,
color: optionsSetup.textPerColor, color: optionsSetup.textPerColor,
fontWeight: optionsSetup.textPerFontWeight fontWeight: optionsSetup.textPerFontWeight,
} },
}; };
title.textStyle["rich"] = rich; title.textStyle["rich"] = rich;
this.options.title = title; this.options.title = title;
@ -397,21 +406,21 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: optionsSetup.color0Start // 0% 处的颜色 color: optionsSetup.color0Start, // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: optionsSetup.color100End // 100% 处的颜色 color: optionsSetup.color100End, // 100% 处的颜色
} },
] ],
} },
}; };
itemStyle["normal"] = normal; itemStyle["normal"] = normal;
}, },
setOptionSurplusColor() { setOptionSurplusColor() {
const itemStyle = this.options.series[6]["data"][1]["itemStyle"]; const itemStyle = this.options.series[6]["data"][1]["itemStyle"];
const normal = { const normal = {
color: this.optionsSetup.colorsurplus color: this.optionsSetup.colorsurplus,
}; };
itemStyle["normal"] = normal; itemStyle["normal"] = normal;
}, },
@ -423,7 +432,7 @@ export default {
line.length = optionsSetup.lineLength; line.length = optionsSetup.lineLength;
const lineStyle = { const lineStyle = {
width: optionsSetup.lineWidth, width: optionsSetup.lineWidth,
color: optionsSetup.lineColor color: optionsSetup.lineColor,
}; };
line["lineStyle"] = lineStyle; line["lineStyle"] = lineStyle;
}, },
@ -454,13 +463,13 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.options.title.text = "{nums|" + res[0].value + "}{percent|%}"; this.options.title.text = "{nums|" + res[0].value + "}{percent|%}";
this.options.series[6]["data"][0]["value"] = res[0].value; this.options.series[6]["data"][0]["value"] = res[0].value;
this.options.series[6]["data"][1]["value"] = 100 - res[0].value; this.options.series[6]["data"][1]["value"] = 100 - res[0].value;
}); });
} },
} },
}; };
</script> </script>

55
report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
Unescape Escape View File

@ -5,24 +5,25 @@
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetPieNightingaleRoseArea", //南丁格尔玫瑰图面积模式 参考：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple name: "WidgetPieNightingaleRoseArea", //南丁格尔玫瑰图面积模式 参考：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
options: { options: {
legend: { legend: {
top: "bottom" top: "bottom",
}, },
toolbox: { toolbox: {
show: true, show: true,
feature: { feature: {
mark: { show: true } mark: { show: true },
} },
}, },
series: [ series: [
{ {
@ -32,16 +33,16 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
roseType: "area", roseType: "area",
itemStyle: { itemStyle: {
borderRadius: 8 borderRadius: 8,
}, },
data: [] data: [],
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -52,9 +53,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -65,8 +66,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -74,6 +75,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -126,12 +135,12 @@ export default {
padding: [-30, 15, -20, 15], padding: [-30, 15, -20, 15],
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} },
}, },
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.optionsSetup fontWeight: optionsSetup.optionsSetup,
}; };
for (const key in series) { for (const key in series) {
if (series[key].type == "pie") { if (series[key].type == "pie") {
@ -148,8 +157,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -161,7 +170,7 @@ export default {
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true,
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
@ -178,7 +187,7 @@ export default {
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
@ -222,7 +231,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -232,8 +241,8 @@ export default {
this.options.series[key].data = val; this.options.series[key].data = val;
} }
} }
} },
} },
}; };
</script> </script>

61
report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
Unescape Escape View File

@ -1,16 +1,17 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetPiechart", name: "WidgetPiechart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -19,15 +20,15 @@ export default {
text: "", text: "",
left: "center", left: "center",
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
legend: { legend: {
orient: "vertical", orient: "vertical",
left: "left", left: "left",
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
series: [ series: [
{ {
@ -38,16 +39,16 @@ export default {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)" shadowColor: "rgba(0, 0, 0, 0.5)",
} },
} },
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -58,9 +59,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -71,8 +72,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
created() { created() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -80,6 +81,14 @@ export default {
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -137,17 +146,17 @@ export default {
padding: [-30, 15, -20, 15], padding: [-30, 15, -20, 15],
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} },
}, },
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.optionsSetup fontWeight: optionsSetup.optionsSetup,
}; };
for (const key in series) { for (const key in series) {
if (series[key].type == "pie") { if (series[key].type == "pie") {
series[key].label = label; series[key].label = label;
series[key].labelLine = {show: optionsSetup.isShow}; series[key].labelLine = { show: optionsSetup.isShow };
} }
} }
}, },
@ -159,8 +168,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.lineColor, color: optionsSetup.lineColor,
fontSize: optionsSetup.tipFontSize fontSize: optionsSetup.tipFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -177,7 +186,7 @@ export default {
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
@ -220,7 +229,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -230,8 +239,8 @@ export default {
this.options.series[key].data = val; this.options.series[key].data = val;
} }
} }
} },
} },
}; };
</script> </script>

70
report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue
Unescape Escape View File

@ -1,17 +1,17 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import vue from "vue"; import vue from "vue";
import VueSuperSlide from "vue-superslide"; import VueSuperSlide from "vue-superslide";
import { eventBusParams } from "@/utils/screen";
vue.use(VueSuperSlide); vue.use(VueSuperSlide);
export default { export default {
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -20,13 +20,13 @@ export default {
title: {}, title: {},
legend: {}, legend: {},
radar: { radar: {
indicator: [] indicator: [],
}, },
series: [] series: [],
}, },
optionsSetup: {}, optionsSetup: {},
optionsPosition: {}, optionsPosition: {},
optionsData: {} optionsData: {},
}; };
}, },
computed: { computed: {
@ -38,7 +38,7 @@ export default {
height: allStyle.height + "px", height: allStyle.height + "px",
left: allStyle.left + "px", left: allStyle.left + "px",
top: allStyle.top + "px", top: allStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
}, },
}, },
@ -50,14 +50,22 @@ export default {
this.optionsData = val.data; this.optionsData = val.data;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.optionsPosition = this.value.position; this.optionsPosition = this.value.position;
this.optionsData = this.value.data; this.optionsData = this.value.data;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
editorOptions() { editorOptions() {
@ -105,7 +113,7 @@ export default {
lineStyle: { lineStyle: {
color: optionsSetup.axisLineColor, color: optionsSetup.axisLineColor,
opacity: optionsSetup.axisLineOpacity / 100, opacity: optionsSetup.axisLineOpacity / 100,
} },
}; };
const axisName = { const axisName = {
show: optionsSetup.axisNameShow, show: optionsSetup.axisNameShow,
@ -113,14 +121,14 @@ export default {
fontSize: optionsSetup.axisNameFontSize, fontSize: optionsSetup.axisNameFontSize,
fontStyle: optionsSetup.axisNamFontStyle, fontStyle: optionsSetup.axisNamFontStyle,
fontWeight: optionsSetup.axisNamFontWeight, fontWeight: optionsSetup.axisNamFontWeight,
} };
const splitLine = { const splitLine = {
show: optionsSetup.splitLineShow, show: optionsSetup.splitLineShow,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColor, color: optionsSetup.splitLineColor,
opacity: optionsSetup.splitLineOpacity / 100, opacity: optionsSetup.splitLineOpacity / 100,
} },
} };
this.options.radar.axisLine = axisLine; this.options.radar.axisLine = axisLine;
// echarts5.X以上，name属性被替换为axisName // echarts5.X以上，name属性被替换为axisName
this.options.radar.name = axisName; this.options.radar.name = axisName;
@ -142,7 +150,7 @@ export default {
fontSize: optionsSetup.legendFontSize, fontSize: optionsSetup.legendFontSize,
}, },
itemWidth: optionsSetup.legendWidth, itemWidth: optionsSetup.legendWidth,
} };
this.options.legend = legend; this.options.legend = legend;
}, },
// 图例名称设置 // 图例名称设置
@ -151,17 +159,17 @@ export default {
const series = this.options.series; const series = this.options.series;
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值 // 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == '') { if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
series[0].data[i].name = name[i]; series[0].data[i].name = name[i];
} }
this.options.legend['data'] = name; this.options.legend["data"] = name;
} else { } else {
const arr = legendName.split('|'); const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
series[0].data[i].name = arr[i]; series[0].data[i].name = arr[i];
} }
this.options.legend['data'] = arr; this.options.legend["data"] = arr;
} }
}, },
// tooltip 提示语设置，鼠标放置显示 // tooltip 提示语设置，鼠标放置显示
@ -173,13 +181,13 @@ export default {
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize, fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
// 雷达大小设置 // 雷达大小设置
setOptionsMargin() { setOptionsMargin() {
this.options.radar.radius = '70%'; this.options.radar.radius = "70%";
}, },
setOptionsData() { setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
@ -190,8 +198,8 @@ export default {
//去重 //去重
setUnique(arr) { setUnique(arr) {
let newArr = []; let newArr = [];
arr.forEach(item => { arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item); return newArr.includes(item) ? "" : newArr.push(item);
}); });
return newArr; return newArr;
}, },
@ -247,16 +255,16 @@ export default {
legendName.push(name[i]); legendName.push(name[i]);
} }
this.options.series[0] = { this.options.series[0] = {
type: 'radar', type: "radar",
data: data, data: data,
symbolSize: optionsSetup.symbolSize, symbolSize: optionsSetup.symbolSize,
areaStyle: { areaStyle: {
normal: { normal: {
opacity: optionsSetup.opacity / 100, opacity: optionsSetup.opacity / 100,
} },
}, },
}; };
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
dynamicDataFn(data, refreshTime) { dynamicDataFn(data, refreshTime) {
@ -272,7 +280,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -328,19 +336,19 @@ export default {
legendName.push(name[i]); legendName.push(name[i]);
} }
this.options.series[0] = { this.options.series[0] = {
type: 'radar', type: "radar",
data: data, data: data,
symbolSize: optionsSetup.symbolSize, symbolSize: optionsSetup.symbolSize,
areaStyle: { areaStyle: {
normal: { normal: {
opacity: optionsSetup.opacity / 100, opacity: optionsSetup.opacity / 100,
} },
}, },
}; };
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

14
report-ui/src/views/bigscreenDesigner/designer/widget/widgetHref.vue
Unescape Escape View File

@ -19,11 +19,11 @@ export default {
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
options: {} options: {},
}; };
}, },
computed: { computed: {
@ -52,22 +52,22 @@ export default {
top: this.transStyle.top + "px", top: this.transStyle.top + "px",
right: this.transStyle.right + "px", right: this.transStyle.right + "px",
linkAdress: this.transStyle.linkAdress, linkAdress: this.transStyle.linkAdress,
jumpMode: this.transStyle.jumpMode == "other" ? "_blank" : "_self" jumpMode: this.transStyle.jumpMode == "other" ? "_blank" : "_self",
}; };
} },
}, },
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
this.options = val; this.options = val;
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.options = this.value; this.options = this.value;
}, },
methods: {} methods: {},
}; };
</script> </script>

76
report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
Unescape Escape View File

@ -1,56 +1,60 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import wordCloud from "../../../../../../static/wordCloud/echarts-wordcloud.min.js"; import wordCloud from "../../../../../../static/wordCloud/echarts-wordcloud.min.js";
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "widgetWordCloud", name: "widgetWordCloud",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
options: { options: {
tooltip: { tooltip: {
show: true show: true,
}, },
series: [ series: [
{ {
type: 'wordCloud', type: "wordCloud",
size: ['9%', '99%'], size: ["9%", "99%"],
sizeRange: [6, 30], sizeRange: [6, 30],
textRotation: [0, 45, 90, -45], textRotation: [0, 45, 90, -45],
rotationRange: [-45, 90], rotationRange: [-45, 90],
shape: 'circle', shape: "circle",
textPadding: 0, textPadding: 0,
autoSize: { autoSize: {
enable: true, enable: true,
minSize: 6 minSize: 6,
}, },
textStyle: { textStyle: {
normal: { normal: {
color: function () { color: function () {
return 'rgb(' + [ return (
Math.round(Math.random() * 160), "rgb(" +
Math.round(Math.random() * 160), [
Math.round(Math.random() * 160) Math.round(Math.random() * 160),
].join(',') + ')'; Math.round(Math.random() * 160),
} Math.round(Math.random() * 160),
].join(",") +
")"
);
},
}, },
}, },
data: [] data: [],
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsSetup: {}, optionsSetup: {},
flagInter: null flagInter: null,
}; };
}, },
computed: { computed: {
@ -61,9 +65,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -74,8 +78,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -83,6 +87,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
console.log("dynamicData", dynamicData);
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -118,12 +130,18 @@ export default {
// 词云字体范围 // 词云字体范围
setOptionsSizeRange() { setOptionsSizeRange() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
this.options.series[0].sizeRange = [optionsSetup.minRangeSize, optionsSetup.maxRangeSize]; this.options.series[0].sizeRange = [
optionsSetup.minRangeSize,
optionsSetup.maxRangeSize,
];
}, },
// 文字角度 // 文字角度
setOptionsRotationRange() { setOptionsRotationRange() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
this.options.series[0].rotationRange = [optionsSetup.minRotationRange, optionsSetup.maxRotationRange]; this.options.series[0].rotationRange = [
optionsSetup.minRotationRange,
optionsSetup.maxRotationRange,
];
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip() { setOptionsTooltip() {
@ -133,8 +151,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -164,7 +182,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -172,8 +190,8 @@ export default {
for (const key in this.options.series) { for (const key in this.options.series) {
this.options.series[key].data = val; this.options.series[key].data = val;
} }
} },
} },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

Write Preview
Loading…
Cancel
Save