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

feat--增加双Y柱图

Browse Source
qianming 2 years ago
parent b98013e313
commit 23cdf62342
5 changed files with 1413 additions and 3 deletions
Show Stats Download Patch File Download Diff File

904
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js
Unescape Escape View File

@ -0,0 +1,904 @@
export const widgetBarDoubleYaxis = {
code: 'widgetBarDoubleYaxisChart',
type: 'barChart',
tabName: '柱状图',
label: '双Y柱图',
icon: 'iconbianzu23',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '双Y柱图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
},
],
},
{
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: 'nameX',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
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: 'el-slider',
label: '数值角度',
name: 'textAngleYLeft',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthYLeft',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineYLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthYLeft',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '右Y轴设置',
list: [
{
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: 'el-slider',
label: '数值角度',
name: 'textAngleYRight',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthYRight',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineYRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthYRight',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 5
},
{
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-switch',
label: '显示',
name: 'isShowBar',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
},
{
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-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
{
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: 600000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{ "axis": "1月", "bar1": 2.6, "bar2": 2 },
{ "axis": "2月", "bar1": 5.9, "bar2": 2.2 },
{ "axis": "3月", "bar1": 9, "bar2": 3.3 },
{ "axis": "4月", "bar1": 26.4, "bar2": 4.5 },
{ "axis": "5月", "bar1": 28.7, "bar2": 6.3 },
{ "axis": "6月", "bar1": 70.7, "bar2": 10.2 },
{ "axis": "7月", "bar1": 175.6, "bar2": 20.3 },
{ "axis": "8月", "bar1": 182.2, "bar2": 23.4 },
{ "axis": "9月", "bar1": 48.7, "bar2": 23 },
{ "axis": "10月", "bar1": 18.8, "bar2": 16.5 },
{ "axis": "11月", "bar1": 6, "bar2": 12 },
{ "axis": "12月", "bar1": 2.3, "bar2": 6.2 },
]
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-barlinechart',
dictKey: 'BAR_LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
},
],
// 坐标
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

@ -43,6 +43,7 @@ import { widgetSelect } from "./configure/form/widget-select";
import { widgetFormTime } from "./configure/form/widget-form-time"; import { widgetFormTime } from "./configure/form/widget-form-time";
import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertical"; import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertical";
import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal" import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal"
import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart";
export const widgetTool = [ export const widgetTool = [
// type=html类型的组件 // type=html类型的组件
@ -81,5 +82,6 @@ export const widgetTool = [
widgetScaleHorizontal, widgetScaleHorizontal,
widgetSelect, widgetSelect,
// widgetInput, // widgetInput,
widgetFormTime widgetFormTime,
widgetBarDoubleYaxis,
] ]

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

@ -0,0 +1,500 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
</div>
</template>
<script>
export default {
name: "WidgetBarDoubleYaxisChart",
components: {},
props: {
value: Object,
ispreview: Boolean,
},
data() {
return {
options: {
color: [],
grid: {},
title: {
text: "",
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}%",
},
legend: {
textStyle: {
color: "#fff",
},
},
xAxis: [
{
type: "category",
data: [],
axisLabel: {
show: false,
textStyle: {
color: "#fff",
},
},
},
],
yAxis: [
{
type: "value",
name: "",
min: 0,
max: 250,
interval: 50,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
},
{
type: "value",
name: "",
min: 0,
max: 25,
interval: 5,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
},
],
series: [
{
name: "",
type: "bar",
yAxisIndex: 0,
data: [],
itemStyle: {
barBorderRadius: null,
},
},
{
name: "",
type: "bar",
yAxisIndex: 1,
data: [],
itemStyle: {},
},
],
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
optionsSetup: {},
};
},
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.collapse;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true,
},
},
created() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// 修改图标options属性
editorOptions() {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
//this.setOptionsLine();
this.setOptionsBar();
this.setOptionsTooltip();
this.setOptionsData();
this.setOptionsMargin();
this.setOptionsLegend();
this.setOptionsColor();
},
// 标题修改
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.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX,
},
// 轴反转
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,
width: optionsSetup.lineWidthX,
},
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
},
},
};
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,
// 文字角度
rotate: optionsSetup.textAngleYLeft,
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorYLeft,
fontSize: optionsSetup.fontSizeYLeft,
},
},
axisTick: {
// 刻度
show: optionsSetup.tickLineYLeft,
},
axisLine: {
show: optionsSetup.lineYLeft,
lineStyle: {
width: optionsSetup.lineWidthYLeft,
color: optionsSetup.lineColorYLeft,
},
},
splitLine: {
show: optionsSetup.isShowSplitLineYLeft,
lineStyle: {
color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft,
},
},
},
{
type: "value",
// 均分
splitNumber: optionsSetup.splitNumberRight,
// 坐标轴是否显示
show: optionsSetup.isShowYRight,
// 坐标轴名称
name: optionsSetup.textNameYRight,
// 别名
nameTextStyle: {
color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.nameFontSizeYRight,
},
axisLabel: {
show: true,
// 文字角度
rotate: optionsSetup.textAngleYRight,
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorYRight,
fontSize: optionsSetup.fontSizeYRight,
},
},
axisTick: {
// 刻度
show: optionsSetup.tickLineYRight,
},
axisLine: {
show: optionsSetup.lineYRight,
lineStyle: {
width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight,
},
},
splitLine: {
show: optionsSetup.isShowSplitLineYRight,
lineStyle: {
color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight,
},
},
},
];
this.options.yAxis = yAxis;
},
// 折线设置 数值设置
setOptionsLine() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].symbol = optionsSetup.symbol;
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100,
};
} else {
series[key].areaStyle = {
opacity: 0,
};
}
series[key].lineStyle = {
width: optionsSetup.lineWidth,
};
series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = {
show: optionsSetup.isShowLine,
position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
};
}
}
this.options.series = series;
},
// 柱体设置 数值设置
setOptionsBar() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
show: optionsSetup.isShowBar,
position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
};
series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight;
series[key].itemStyle.barBorderRadius = optionsSetup.radius;
}
}
this.options.series = series;
},
// tooltip 设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.tipsColor,
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;
},
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;
}
},
// 图例颜色修改
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
this.options.color = arrColor;
this.options = Object.assign({}, this.options);
},
// 数据处理
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const series = this.options.series;
let axis = [];
let bar1 = [];
let bar2 = [];
for (const i in val) {
axis[i] = val[i].axis;
bar1[i] = val[i].bar1;
bar2[i] = val[i].bar2;
}
// x轴
this.options.xAxis.data = axis;
// series
series[0].data = bar1;
series[1].data = bar2;
const legendName = [];
legendName.push("bar1");
legendName.push("bar2");
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then((res) => {
this.renderingFn(res);
});
},
renderingFn(val) {
this.options.xAxis.data = val.xAxis;
// series
const series = this.options.series;
const legendName = [];
let k = 0;
for (const i in val.series){
if (val.series[i].type == "bar") {
series[k]['data'] = val.series[i].data;
k++
legendName.push(val.series[i].name);
}
}
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
},
};
</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

@ -45,6 +45,7 @@ import widgetInput from "./form/widgetInput.vue";
import widgetFormTime from "./form/widgetFormTime.vue"; import widgetFormTime from "./form/widgetFormTime.vue";
import widgetScaleVertical from "./scale/widgetScaleVertical.vue"; import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
export default { export default {
name: "WidgetTemp", name: "WidgetTemp",
@ -82,8 +83,9 @@ export default {
widgetScaleVertical, widgetScaleVertical,
widgetScaleHorizontal, widgetScaleHorizontal,
widgetSelect, widgetSelect,
widgetInput, //widgetInput,
widgetFormTime, widgetFormTime,
widgetBarDoubleYaxisChart,
}, },
model: { model: {
prop: "value", prop: "value",

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

@ -52,6 +52,7 @@ import widgetInput from "./form/widgetInput.vue";
import widgetFormTime from "./form/widgetFormTime.vue"; import widgetFormTime from "./form/widgetFormTime.vue";
import widgetScaleVertical from "./scale/widgetScaleVertical.vue"; import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
export default { export default {
name: "Widget", name: "Widget",
@ -89,8 +90,9 @@ export default {
widgetScaleVertical, widgetScaleVertical,
widgetScaleHorizontal, widgetScaleHorizontal,
widgetSelect, widgetSelect,
widgetInput, //widgetInput,
widgetFormTime, widgetFormTime,
widgetBarDoubleYaxisChart,
}, },
model: { model: {
prop: "value", prop: "value",

Write Preview
Loading…
Cancel
Save