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

对比图更新

Browse Source
qianming 3 years ago
parent a43f966c69
commit e8a86fe649
3 changed files with 249 additions and 132 deletions
Show Stats Download Patch File Download Diff File

6
report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-bar-stack.js
Unescape Escape View File

@ -1,6 +1,6 @@
/*
* @Descripttion: 柱状堆叠图
* @version:
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:37:09
* @LastEditors: qianlishi
@ -350,7 +350,8 @@ export const widgetBarStack = {
required: false,
placeholder: '',
value: '#fff',
}, {
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
@ -364,7 +365,6 @@ export const widgetBarStack = {
required: false,
placeholder: '',
value: '#fff',
}
],
},

203
report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js
Unescape Escape View File

@ -160,13 +160,29 @@ export const widgetLineCompare = {
value: true,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'splitNumberX',
type: 'el-input-text',
label: '坐标名',
name: 'xName',
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: 'el-switch',
label: '数值居中',
@ -191,6 +207,14 @@ export const widgetLineCompare = {
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'splitNumberX',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '刻度线',
@ -228,9 +252,40 @@ export const widgetLineCompare = {
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYTop',
require: false,
placeholder: '',
value: ''
},{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYTop',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值间隔',
label: '坐标字号',
name: 'namefontSizeYTop',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '缩放',
name: 'scaleYTop',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '数值切分',
name: 'splitNumberYTop',
required: false,
placeholder: '',
@ -239,7 +294,7 @@ export const widgetLineCompare = {
{
type: 'vue-color',
label: '数值颜色',
name: 'XcolorRight',
name: 'colorYTop',
required: false,
placeholder: '',
value: '#fff',
@ -247,7 +302,7 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeXRight',
name: 'fontSizeYTop',
required: false,
placeholder: '',
value: 14,
@ -255,31 +310,31 @@ export const widgetLineCompare = {
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineRight',
name: 'tickLineYTop',
require: false,
placeholder: '',
value: false,
value: true,
},
{
type: 'el-switch',
label: 'X轴线',
name: 'xLineRight',
label: 'y轴线',
name: 'lineYTop',
require: false,
placeholder: '',
value: false,
value: true,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorXRight',
name: 'lineColorYTop',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '竖分割线',
name: 'SplitLineRight',
label: '分割线',
name: 'splitLineYTop',
require: false,
placeholder: '',
value: false,
@ -287,7 +342,7 @@ export const widgetLineCompare = {
{
type: 'vue-color',
label: '分割线颜色',
name: 'SplitLineColorRight',
name: 'splitLineColorYTop',
required: false,
placeholder: '',
value: '#fff',
@ -295,85 +350,127 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '分割线宽度',
name: 'SplitLinefontSizeRight',
name: 'splitLinefontSizeYTop',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '边框线',
name: 'frameLineRight',
require: false,
placeholder: '',
value: false,
},
],
},
{
name: '下Y轴设置',
name: '下y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideY',
name: 'isShowYBottom',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYBottom',
require: false,
placeholder: '',
value: ''
},{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
label: '坐标名颜色',
name: 'nameColorYBottom',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
label: '坐标字号',
name: 'namefontSizeYBottom',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-select',
label: '数值对齐',
name: 'textAlign',
type: 'el-switch',
label: '缩放',
name: 'scaleYBottom',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
value: true,
},
{
type: 'el-input-number',
label: '数值切分',
name: 'splitNumberYBottom',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYBottom',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYBottom',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineY',
name: 'tickLineYBottom',
require: false,
placeholder: '',
value: false,
value: true,
},
{
type: 'el-switch',
label: 'Y轴线',
name: 'lineY',
label: 'y轴线',
name: 'lineYBottom',
require: false,
placeholder: '',
value: false,
value: true,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
name: 'lineColorYBottom',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线',
name: 'splitLineYBottom',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYBottom',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLinefontSizeYBottom',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -444,11 +541,19 @@ export const widgetLineCompare = {
list: [
{
type: 'el-slider',
label: '左右边距(像素)',
name: 'marginLeftRight',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
value: 20,
},
{
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 50,
},
{
type: 'el-slider',
@ -464,7 +569,7 @@ export const widgetLineCompare = {
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
value: 40,
},
],
},

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

@ -265,11 +265,11 @@ export default {
editorOptions() {
this.setOptionsTitle();
this.setOptionsX();
// this.setOptionsXRight();
// this.setOptionsY();
this.setOptionsYTop();
this.setOptionsYBottom();
// this.setOptionsTop();
// this.setOptionsTooltip();
// this.setOptionsGrid();
this.setOptionsGrid();
// this.setOptionsLegend();
// this.setOptionsColor();
this.setOptionsData();
@ -294,6 +294,11 @@ export default {
const xAxis0 = {
gridIndex: 0,
show: optionsSetup.isShowX,
name: optionsSetup.xName, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
type: 'category',
boundaryGap: optionsSetup.boundaryX, // 值居中
axisLine: { //x轴线
@ -337,64 +342,90 @@ export default {
this.options.xAxis[0] = xAxis0;
this.options.xAxis[1] = xAxis1;
},
// 右X轴设置
setOptionsXRight() {
// 上y轴设置
setOptionsYTop() {
const optionsSetup = this.optionsSetup;
const xAxisRight = {
gridIndex: 2,
splitNumber: optionsSetup.splitNumberRight,
type: 'value',
axisLine: {//X轴线
show: optionsSetup.xLineRight,
lineStyle: {
color: optionsSetup.lineColorXRight,
const yAxis = {
gridIndex: 0,
splitNumber: optionsSetup.splitNumberYTop,
show: optionsSetup.isShowYTop,
scale: optionsSetup.scaleYTop, // 缩放
name: optionsSetup.textNameYTop, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.nameColorYTop,
fontSize: optionsSetup.namefontSizeYTop
},
axisLabel: {
show: true,
textStyle: {
color: optionsSetup.colorYTop,
fontSize: optionsSetup.fontSizeYTop,
},
},
axisTick: {
show: optionsSetup.tickLineRight,
axisTick: { // 刻度
show: optionsSetup.tickLineYTop,
},
position: 'bottom',
axisLabel: { // x轴
show: optionsSetup.hideXRight,
textStyle: {
color: optionsSetup.XcolorRight,
fontSize: optionsSetup.fontSizeXRight
}
axisLine: { // 轴线
show: optionsSetup.lineYTop,
lineStyle: {
color: optionsSetup.lineColorYTop,
},
},
splitLine: { // 分割线
show: optionsSetup.SplitLineRight,
splitLine: {
show: optionsSetup.splitLineYTop,
lineStyle: {
color: optionsSetup.SplitLineColorRight,
width: optionsSetup.SplitLinefontSizeRight,
type: 'solid'
}
}
width: optionsSetup.splitLinefontSizeYTop,
color: optionsSetup.splitLineColorYTop,
},
},
axisPointer: {
snap: true
},
}
this.options.xAxis[2] = xAxisRight;
this.options.yAxis[0] = yAxis
},
// Y轴设置
setOptionsY() {
// 下Y轴设置
setOptionsYBottom() {
const optionsSetup = this.optionsSetup;
const axisLine = {
show: optionsSetup.lineY,
lineStyle: {
color: optionsSetup.lineColorY
}
};
const axisTick = {
show: optionsSetup.tickLineY
};
const axisLabel = {
show: optionsSetup.hideY,
textStyle: {
align: optionsSetup.textAlign,
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY,
}
};
this.options.yAxis[1]['axisLine'] = axisLine;
this.options.yAxis[1]['axisTick'] = axisTick;
this.options.yAxis[1]['axisLabel'] = axisLabel;
const yAxis = {
gridIndex: 1,
splitNumber: optionsSetup.splitNumberYBottom,
show: optionsSetup.isShowYBottom,
scale: optionsSetup.scaleYBottom, // 缩放
name: optionsSetup.textNameYBottom, // 坐标轴名称
nameTextStyle: {
color: optionsSetup.nameColorYBottom,
fontSize: optionsSetup.namefontSizeYBottom
},
inverse: true, // 翻转
axisLabel: {
show: true,
textStyle: {
color: optionsSetup.colorYBottom,
fontSize: optionsSetup.fontSizeYBottom,
},
},
axisTick: { // 刻度
show: optionsSetup.tickLineYBottom,
},
axisLine: { // 轴线
show: optionsSetup.lineYBottom,
lineStyle: {
color: optionsSetup.lineColorYBottom,
},
},
splitLine: {
show: optionsSetup.splitLineYBottom,
lineStyle: {
width: optionsSetup.splitLinefontSizeYBottom,
color: optionsSetup.splitLineColorYBottom,
},
},
axisPointer: {
snap: true
},
}
this.options.yAxis[1] = yAxis
},
// 数值设定、柱体设置
setOptionsTop() {
@ -450,41 +481,22 @@ export default {
this.options.tooltip = tooltip;
},
// 边距设置
getOptionsBottom() {
const optionsSetup = this.optionsSetup;
let bottom = optionsSetup.marginBottom;
if (optionsSetup.hideXLeft) {
bottom = optionsSetup.marginBottom + 15
} else if (optionsSetup.hideXRight) {
bottom = optionsSetup.marginBottom + 15
}
return bottom
},
setOptionsGrid() {
const optionsSetup = this.optionsSetup;
const grid = [
{//左
show: optionsSetup.frameLineLeft,
left: optionsSetup.marginLeftRight,
{// 上
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
containLabel: true,
width: '40%'
bottom: '50%',
},
{//中间字体位置
show: false,
left: "51%",
top: optionsSetup.marginTop,
bottom: this.getOptionsBottom(),
width: '0%'
},
{//右
show: optionsSetup.frameLineRight,
right: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
{ // 下
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
containLabel: true,
width: '40%'
top: '51%',
bottom: optionsSetup.marginBottom,
},
]
this.options.grid = grid;

Write Preview
Loading…
Cancel
Save