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

feat--柱状图支持多柱

Browse Source
qianming 1 year ago
parent fd871c031b
commit 22c5b17484
3 changed files with 250 additions and 64 deletions
Show Stats Download Patch File Download Diff File

106
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js
Unescape Escape View File

@ -67,6 +67,18 @@ export const widgetBarchart = {
placeholder: '', placeholder: '',
value: 0, value: 0,
}, },
{
type: 'el-select',
label: '堆叠样式',
name: 'stackStyle',
required: false,
placeholder: '',
selectOptions: [
{ code: 'leftRight', name: '左右堆叠' },
{ code: 'upDown', name: '上下堆叠' },
],
value: 'leftRight'
},
], ],
}, },
{ {
@ -197,6 +209,88 @@ export const widgetBarchart = {
}, },
], ],
}, },
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '名称( | 分隔)',
name: 'legendName',
required: false,
placeholder: '多值以' | '隔开',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '顶部' },
{ code: 'bottom', name: '底部' },
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{ code: 'vertical', name: '竖排' },
{ code: 'horizontal', name: '横排' },
],
value: 'horizontal'
},
],
},
{ {
name: 'X轴设置', name: 'X轴设置',
list: [ list: [
@ -548,6 +642,18 @@ export const widgetBarchart = {
{ {
name: '自定义配色', name: '自定义配色',
list: [ list: [
{
type: 'el-select',
label: '配色样式',
name: 'colorStyle',
required: false,
placeholder: '',
selectOptions: [
{ code: 'same', name: '同色' },
{ code: 'unsame', name: '异色' },
],
value: 'same'
},
{ {
type: 'customColor', type: 'customColor',
label: '', label: '',

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

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -9,6 +9,7 @@ import {
originWidgetLinkageLogic, originWidgetLinkageLogic,
targetWidgetLinkageLogic, targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic"; } from "@/views/bigscreenDesigner/designer/linkageLogic";
export default { export default {
name: "WidgetBarchart", name: "WidgetBarchart",
components: {}, components: {},
@ -108,10 +109,9 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
this.setOptionsTop(); this.setOptionsLegend();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsMargin(); this.setOptionsMargin();
this.setOptionsColor();
this.setOptionsData(); this.setOptionsData();
}, },
// 标题修改 // 标题修改
@ -225,36 +225,6 @@ export default {
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 数值设定 or 柱体设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
if (series[0].type == "bar") {
if (optionsSetup.verticalShow) {
series[0].label = {
show: optionsSetup.isShow,
position: "right",
distance: optionsSetup.distance,
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
},
};
} else {
series[0].label = {
show: optionsSetup.isShow,
position: "top",
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
};
}
}
series[0].barWidth = optionsSetup.maxWidth;
series[0].barMinHeight = optionsSetup.minHeight;
},
// tooltip 设置 // tooltip 设置
setOptionsTooltip() { setOptionsTooltip() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -280,33 +250,62 @@ export default {
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
// 图例颜色修改 // 图例
setOptionsColor() { setOptionsLegend() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor; const legend = this.options.legend;
if (!customColor) return; legend.show = optionsSetup.isShowLegend;
const arrColor = []; legend.left = optionsSetup.lateralPosition;
for (let i = 0; i < customColor.length; i++) { legend.top = optionsSetup.longitudinalPosition;
arrColor.push(customColor[i].color); legend.bottom = optionsSetup.longitudinalPosition;
} legend.orient = optionsSetup.layoutFront;
const itemStyle = { legend.textStyle = {
normal: { color: optionsSetup.legendColor,
color: (params) => { fontSize: optionsSetup.legendFontSize,
return arrColor[params.dataIndex]; };
legend.itemWidth = optionsSetup.legendWidth;
}, },
barBorderRadius: optionsSetup.radius, // 图例名称设置
setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
this.options.legend["data"] = name;
} else {
const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
this.options.legend["data"] = arr;
}
}, },
}; //获取堆叠样式
for (const key in this.options.series) { getStackStyle() {
if (this.options.series[key].type == "bar") { const optionsSetup = this.optionsSetup;
this.options.series[key].itemStyle = itemStyle; let style = "";
if (optionsSetup.stackStyle == "upDown") {
style = "total";
} }
return style;
},
// 获得位置
getOptionsPosition() {
const optionsSetup = this.optionsSetup;
let position = "";
if (optionsSetup.verticalShow) {
position = "right";
} else {
position = "top";
} }
this.options = Object.assign({}, this.options); return position;
}, },
// 数据解析 // 数据解析
setOptionsData(e, paramsConfig) { setOptionsData(e, paramsConfig) {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始 // 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
@ -332,6 +331,12 @@ export default {
// 静态数据 // 静态数据
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const series = this.options.series; const series = this.options.series;
let axis = []; let axis = [];
let data = []; let data = [];
@ -339,6 +344,8 @@ export default {
axis[i] = val[i].axis; axis[i] = val[i].axis;
data[i] = val[i].data; data[i] = val[i].data;
} }
const legendName = [];
legendName.push("bar");
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
@ -351,8 +358,42 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
if (series[0].type == "bar") { for (const i in series) {
series[0].data = data; if (series[i].type == "bar") {
series[i].type = "bar";
series[i].barGap = "0%";
series[i].barWidth = optionsSetup.maxWidth;
series[i].barMinHeight = optionsSetup.minHeight;
series[i].label = {
show: optionsSetup.isShow,
position: this.getOptionsPosition(),
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
};
// 获取颜色样式
if (optionsSetup.colorStyle == 'same') {
series[i].itemStyle = {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
},
};
} else {
series[i].itemStyle = {
normal: {
color: (params) => {
return arrColor[params.dataIndex];
},
barBorderRadius: optionsSetup.radius,
},
};
}
series[i].data = data;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
}
} }
}, },
// 动态数据 // 动态数据
@ -377,6 +418,14 @@ export default {
}); });
}, },
renderingFn(optionsSetup, val) { renderingFn(optionsSetup, val) {
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const series = [];
const legendName = [];
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
@ -389,13 +438,48 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// series for (const i in val.series) {
const series = this.options.series; legendName.push(val.series[i].name);
for (const i in series) { const obj = {};
if (series[i].type == "bar") { if (val.series[i].type == "bar") {
series[i].data = val.series[i].data; obj.type = "bar";
obj.barGap = "0%";
obj.stack = this.getStackStyle();
obj.barWidth = optionsSetup.maxWidth;
obj.barMinHeight = optionsSetup.minHeight;
obj.label = {
show: optionsSetup.isShow,
position: this.getOptionsPosition(),
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
};
// 获取颜色样式
if (optionsSetup.colorStyle == 'same') {
obj.itemStyle = {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
},
};
} else {
obj.itemStyle = {
normal: {
color: (params) => {
return arrColor[params.dataIndex];
},
barBorderRadius: optionsSetup.radius,
},
};
}
obj.data = val.series[i].data;
series.push(obj);
} }
} }
this.options.series = series;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
}, },
}, },
}; };

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

@ -293,9 +293,6 @@ export default {
}, },
// 处理数据 // 处理数据
setOptionsData(e, paramsConfig) { setOptionsData(e, paramsConfig) {
console.log("ces", e);
console.log("ces", paramsConfig);
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData; const myDynamicData = optionsData.dynamicData;
@ -312,7 +309,6 @@ export default {
} }
}); });
} }
console.log(myDynamicData);
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);

Write Preview
Loading…
Cancel
Save