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

新增柱线堆叠图

Browse Source
qianming 2 years ago
parent 22bb419c20
commit ef5716c782
5 changed files with 1351 additions and 3 deletions
Show Stats Download Patch File Download Diff File

801
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-line-stack.js
Unescape Escape View File

@ -0,0 +1,801 @@
/*
* @Descripttion: 柱线堆叠图
* @Author: foming
*/
export const widgetBarLineStack = {
code: 'widgetBarLineStackChart',
type: 'chart',
label: '柱线堆叠图',
icon: 'iconzhuxiantu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱线堆叠图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 20,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
],
},
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 3,
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 3,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题名',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题名',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
],
},
{
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轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '轴别名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '别名颜色',
name: 'xNameColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '别名字号',
name: 'xNameFontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '文字间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '文字颜色',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '左显示',
name: 'isShowYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYLeft',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '右显示',
name: 'isShowYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYRight',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeYRight',
required: false,
placeholder: '',
value: 14,
}, {
type: 'vue-color',
label: '数值颜色',
name: 'colorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYRight',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
],
},
{
name: '柱体数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowBar',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 10
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeBar',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorBar',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightBar',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 10
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeLine',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorLine',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightLine',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: 'rgba(0, 206, 209, 1)'
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis": "2021-07", "name": "A", "bar": "12", "line": "20"},
{"axis": "2021-07", "name": "B", "bar": "20", "line": "12"},
{"axis": "2021-08", "name": "A", "bar": "0", "line": "8"},
{"axis": "2021-08", "name": "B", "bar": "5", "line": "3"},
{"axis": "2021-09", "name": "A", "bar": "15", "line": "9"},
{"axis": "2021-09", "name": "B", "bar": "30", "line": "19"},
{"axis": "2021-10", "name": "A", "bar": "10", "line": "27"},
{"axis": "2021-10", "name": "B", "bar": "24", "line": "6"},
{"axis": "2021-11", "name": "A", "bar": "23", "line": "29"},
{"axis": "2021-11", "name": "B", "bar": "8", "line": "9"},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 250,
},
],
}
}

4
report-ui/src/views/bigscreenDesigner/designer/tools/main.js
Unescape Escape View File

@ -37,6 +37,7 @@ import {widgetMoreBarLine} from "./configure/widget-more-bar-line";
import {widgetWordCloud} from "./configure/widget-word-cloud"; import {widgetWordCloud} from "./configure/widget-word-cloud";
import {widgetHeatmap} from "./configure/widget-heatmap"; import {widgetHeatmap} from "./configure/widget-heatmap";
import {widgetRadar} from "./configure/widget-radar"; import {widgetRadar} from "./configure/widget-radar";
import {widgetBarLineStack} from "./configure/widget-bar-line-stack";
export const widgetTool = [ export const widgetTool = [
// type=html类型的组件 // type=html类型的组件
@ -69,5 +70,6 @@ export const widgetTool = [
widgetMoreBarLine, widgetMoreBarLine,
widgetWordCloud, widgetWordCloud,
widgetHeatmap, widgetHeatmap,
widgetRadar widgetRadar,
widgetBarLineStack
] ]

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

@ -0,0 +1,541 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
export default {
name: "widgetBarLineStackChart",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {
grid: {},
legend: {
textStyle: {
color: "#fff"
}
},
xAxis: {
type: "category",
data: [],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
yAxis: [
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#cdd5e2'
}
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#666666'
}
},
},
{
type: 'value',
nameTextStyle: {
color: '#666666'
},
axisLine: {
lineStyle: {
color: '#cdd5e2'
}
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#666666'
}
}
}
],
series: [
{
data: [],
name: '',
type: "bar",
barGap: "0%",
itemStyle: {
barBorderRadius: null
}
},
{
data: [],
name: '',
type: "line",
itemStyle: {}
}
]
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsSetup: {},
flagInter: null
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// 修改图标options属性
editorOptions() {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
this.setOptionsTooltip();
this.setOptionsMargin();
this.setOptionsLegend();
this.setOptionsData();
},
// 标题修改
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
// X轴设置
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
// 坐标轴是否显示
show: optionsSetup.hideX,
// 坐标轴名称
name: optionsSetup.xName,
nameTextStyle: {
color: optionsSetup.xNameColor,
fontSize: optionsSetup.xNameFontSize
},
// 轴反转
inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
// 文字间隔
interval: optionsSetup.textInterval,
// 文字角度
rotate: optionsSetup.textAngleX,
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
}
}
};
this.options.xAxis = xAxis;
},
// Y轴设置
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = [
{
type: "value",
splitNumber: optionsSetup.splitNumberLeft,// 均分
show: optionsSetup.isShowYLeft, // 坐标轴是否显示
name: optionsSetup.textNameYLeft, // 坐标轴名称
nameTextStyle: { // 别名
color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.nameFontSizeYLeft
},
axisLabel: {
show: true,
textStyle: {
color: optionsSetup.colorYLeft, // y轴 坐标文字颜色
fontSize: optionsSetup.fontSizeYLeft
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorYLeft
}
},
splitLine: {
show: false,
}
},
{
type: "value",
splitNumber: optionsSetup.splitNumberRight,// 均分
show: optionsSetup.isShowYRight, // 坐标轴是否显示
name: optionsSetup.textNameYRight, // 坐标轴名称
nameTextStyle: { // 别名
color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.nameFontSizeYRight
},
axisLabel: {
show: true,
textStyle: {
color: optionsSetup.colorYRight, // y轴 坐标文字颜色
fontSize: optionsSetup.fontSizeYRight
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorYRight
}
},
splitLine: {
show: false,
}
}
];
this.options.yAxis = yAxis;
},
// tooltip 提示语设置，鼠标放置显示
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipsFontSize
}
};
this.options.tooltip = tooltip;
},
// 边距设置
setOptionsMargin() {
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
// 图例操作 legend
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.legendWidth;
},
// 图例名称设置
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
}
},
// 数据解析
setOptionsData() {
const optionsSetup = this.optionsSetup;
// 数据类型 静态 or 动态
const optionsData = this.optionsData;
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//去重
setUnique(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
getStaticSeriesData(xAxisList, yAxis, data, type) {
const typeData = new Array(xAxisList.length).fill(0);
for (const i in xAxisList) {
for (const j in data) {
if (data[j].name == yAxis && data[j].axis == xAxisList[i]) {
typeData[i] = data[j][type];
}
}
}
return typeData;
},
//静态数据
staticDataFn(val) {
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 = [];
let xAxisList = [];
let yAxisList = [];
for (const i in val) {
xAxisList[i] = val[i].axis;
yAxisList[i] = val[i].name;
}
xAxisList = this.setUnique(xAxisList);
yAxisList = this.setUnique(yAxisList);
const legendName = yAxisList;
for (let i = 0; i < yAxisList.length; i++) {
const bar = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "bar");
series.push({
name: yAxisList[i],
type: 'bar',
data: bar,
barGap: '0%',
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
position: 'top',
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
},
//颜色，圆角属性
itemStyle: {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
}
})
}
for (let i = 0; i < yAxisList.length; i++) {
const line = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "line");
series.push({
name: yAxisList[i],
type: 'line',
data: line,
yAxisIndex: 1,
showSymbol: optionsSetup.markPoint,
symbolSize: optionsSetup.pointSize,
smooth: optionsSetup.smoothCurve,
// 线条
lineStyle: {
color: arrColor[i],
width: optionsSetup.lineWidth,
},
label: {
show: optionsSetup.isShowLine,
position: 'top',
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
},
})
}
this.options.series = series;
this.options.xAxis.data = xAxisList;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val, optionsSetup);
this.flagInter = setInterval(() => {
this.getEchartData(val, optionsSetup);
}, refreshTime);
} else {
this.getEchartData(val, optionsSetup);
}
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(optionsSetup, res);
});
},
renderingFn(optionsSetup, val) {
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
this.options.xAxis.data = val.xAxis;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
const series = [];
let legendName = [];
for (const i in val.series) {
legendName.push(val.series[i].name);
}
legendName = this.setUnique(legendName);
for (let i = 0; i < legendName.length; i++) {
const bar = this.getDynamicSeriesData(legendName[i], val.series, "bar");
series.push({
name: legendName[i],
type: 'bar',
data: bar,
barGap: '0%',
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
position: 'top',
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
},
//颜色，圆角属性
itemStyle: {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
}
})
}
for (let i = 0; i < legendName.length; i++) {
const line = this.getDynamicSeriesData(legendName[i], val.series, "line");
series.push({
name: legendName[i],
type: "line",
data: line,
yAxisIndex: 1,
showSymbol: optionsSetup.markPoint,
symbolSize: optionsSetup.pointSize,
smooth: optionsSetup.smoothCurve,
// 线条
lineStyle: {
color: arrColor[i],
width: optionsSetup.lineWidth,
},
label: {
show: optionsSetup.isShowLine,
position: 'top',
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
},
})
}
this.options.series = series;
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
getDynamicSeriesData(legend, series, type) {
let data = [];
for (const i in series) {
if (series[i].name == legend && series[i].type == type) {
data = series[i].data;
}
}
return data
},
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

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

@ -40,6 +40,7 @@ import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap"; import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar"; import widgetRadar from "./radar/widgetRadar";
import widgetBarLineStackChart from "./bar/widgetBarLineStackChart";
export default { export default {
name: "WidgetTemp", name: "WidgetTemp",
@ -72,7 +73,8 @@ export default {
widgetMoreBarLineChart, widgetMoreBarLineChart,
widgetWordCloud, widgetWordCloud,
widgetHeatmap, widgetHeatmap,
widgetRadar widgetRadar,
widgetBarLineStackChart
}, },
model: { model: {
prop: "value", prop: "value",

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

@ -51,6 +51,7 @@ import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud"; import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap"; import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar"; import widgetRadar from "./radar/widgetRadar";
import widgetBarLineStackChart from "./bar/widgetBarLineStackChart";
export default { export default {
name: "Widget", name: "Widget",
@ -83,7 +84,8 @@ export default {
widgetMoreBarLineChart, widgetMoreBarLineChart,
widgetWordCloud, widgetWordCloud,
widgetHeatmap, widgetHeatmap,
widgetRadar widgetRadar,
widgetBarLineStackChart
}, },
model: { model: {
prop: "value", prop: "value",

Write Preview
Loading…
Cancel
Save