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

柱状对比图更新

Browse Source
qianming 3 years ago
parent b7ef3c0cb1
commit 3cc9008f07
2 changed files with 105 additions and 60 deletions
Show Stats Download Patch File Download Diff File

62
report-ui/src/views/report/bigscreen/designer/tools.js
Unescape Escape View File

@ -7010,7 +7010,7 @@ const widgetTools = [
code: 'widgetBarCompareChart',
type: 'chart',
label: '柱状对比图',
icon: 'iconbianzu23',
icon: 'iconduibitupu',
options: {
// 配置
setup: [
@ -7022,14 +7022,14 @@ const widgetTools = [
placeholder: '',
value: '柱状对比图',
},
{
/*{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
},*/
{
type: 'vue-color',
label: '背景颜色',
@ -7048,7 +7048,7 @@ const widgetTools = [
name: 'maxWidth',
required: false,
placeholder: '',
value: 20,
value: 15,
},
{
type: 'el-slider',
@ -7122,47 +7122,9 @@ const widgetTools = [
],
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-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
/*{
name: 'X轴设置',
list: [
{
@ -7263,8 +7225,8 @@ const widgetTools = [
}
],
},
{
},*/
/*{
name: 'Y轴设置',
list: [
{
@ -7355,7 +7317,7 @@ const widgetTools = [
}
],
},
},*/
{
name: '数值设定',
list: [
@ -7365,7 +7327,7 @@ const widgetTools = [
name: 'isShow',
required: false,
placeholder: '',
value: false
value: true
},
{
type: 'el-input-number',
@ -7399,7 +7361,7 @@ const widgetTools = [
},
],
},
{
/*{
name: '提示语设置',
list: [
{
@ -7526,7 +7488,7 @@ const widgetTools = [
value: 'horizontal'
},
],
},
},*/
{
name: '自定义配色',
list: [
@ -7535,7 +7497,7 @@ const widgetTools = [
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}],
value: [{color: '#36c5e7'}, {color: '#e68b55'}],
},
],
},

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

@ -17,7 +17,7 @@ export default {
return {
options: {
title: {
text: '柱状对比图',
//text: '柱状对比图',
x: 'center',
textStyle: {
color: '#ffffff',
@ -61,8 +61,8 @@ export default {
//itemWidth: 0
},
xAxis: [
{
splitNumber: 2,//左间隔
{// 左
splitNumber: 2,
type: 'value',
inverse: true,
axisLine: {
@ -72,14 +72,14 @@ export default {
show: false,
},
position: 'bottom',
axisLabel: {
axisLabel: { // x轴
show: true,
textStyle: {
color: '#ffffff',
fontSize: 12
}
},
splitLine: {
splitLine: { // 分割线
show: true,
lineStyle: {
color: '#57617f',
@ -92,7 +92,7 @@ export default {
gridIndex: 1,
show: false,
},
{
{// 右
gridIndex: 2,
type: 'value',
axisLine: {
@ -177,7 +177,7 @@ export default {
name: '',
type: 'bar',
barGap: 20,
barWidth: '80%',
barWidth: 15,
label: {
normal: {
show: true,
@ -207,7 +207,7 @@ export default {
name: '',
type: 'bar',
barGap: 20,
barWidth: '80%',
barWidth: 15,
xAxisIndex: 2,
yAxisIndex: 2,
label: {
@ -256,7 +256,7 @@ export default {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
@ -273,8 +273,92 @@ export default {
methods: {
// 修改图标options属性
editorOptions() {
this.setOptionsTitle();
this.setOptionsTop();
this.setOptionsColor();
this.setOptionsData();
},
// 标题修改
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
};
this.options.title = title;
},
// 数值设定 or 柱体设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[0].label = {
normal: {
show: optionsSetup.isShow,
//color: 'red',
position: 'insideLeft',
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
}
},
emphasis: {
show: false,
},
},
series[1].label = {
normal: {
show: optionsSetup.isShow,
color: 'red',
position: 'insideRight',
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
}
},
emphasis: {
show: false,
},
},
series[key].barWidth = optionsSetup.maxWidth;
}
}
this.options.series = series;
},
// 颜色修改，圆角修改
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const itemStyleLeft = {
normal: {
color: customColor[0].color,
barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius]
},
emphasis: {
show: false,
},
}
const itemStyleRight = {
normal: {
color: customColor[1].color,
barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
},
emphasis: {
show: false,
},
}
this.options.series[0].itemStyle = itemStyleLeft;
this.options.series[1].itemStyle = itemStyleRight;
},
// 数据解析
setOptionsData() {
const optionsSetup = this.optionsSetup;
@ -335,7 +419,6 @@ export default {
this.options.series[1]['name'] = arrayList[1].name
this.options.series[1]['data'] = arrayList[1].data
this.options.yAxis[1]['data'] = xAxisList
/*if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = xAxisList;

Write Preview
Loading…
Cancel
Save