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

轴线条颜色修改

Browse Source
yanzili 3 years ago
parent b7e330d756
commit 719e656e8b
6 changed files with 516 additions and 447 deletions
Show Stats Download Patch File Download Diff File

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

@ -1164,6 +1164,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 12, value: 12,
}, },
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {
@ -1225,6 +1233,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 12, value: 12,
}, },
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {
@ -1700,6 +1716,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 12, value: 12,
}, },
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {
@ -1761,6 +1785,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 12, value: 12,
}, },
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {
@ -2156,6 +2188,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 12, value: 12,
}, },
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {
@ -2217,6 +2257,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 12, value: 12,
}, },
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {
@ -2766,6 +2814,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 16, value: 16,
}, },
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {
@ -2827,6 +2883,14 @@ const widgetTools = [
placeholder: '', placeholder: '',
value: 12, value: 12,
}, },
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {

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

@ -1,412 +1,413 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options"
autoresize />
</div> </div>
</template> </template>
<script> <script>
import echarts from 'echarts'; import echarts from 'echarts';
export default { export default {
name: 'WidgetGradientColorBarchart', //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE name: 'WidgetGradientColorBarchart', //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data() { data () {
return { return {
options: { options: {
// backgroundColor: '#00265f', // backgroundColor: '#00265f',
"title": { "title": {
"text": "政策补贴额度", "text": "政策补贴额度",
x: "center", x: "center",
y:"4%", y: "4%",
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: '22' fontSize: '22'
}, },
subtextStyle: { subtextStyle: {
color: '#90979c', color: '#90979c',
fontSize: '16', fontSize: '16',
},
}, },
tooltip: { },
trigger: 'axis', tooltip: {
axisPointer: { trigger: 'axis',
type: 'shadow' axisPointer: {
} type: 'shadow'
}
},
grid: {
top: '15%',
right: '3%',
left: '5%',
bottom: '12%'
},
legend: {
textStyle: {
color: '#fff',
}, },
grid: { },
top: '15%', xAxis: {
right: '3%', type: 'category',
left: '5%', data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
bottom: '12%' axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}, },
legend: { axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: { textStyle: {
color: '#fff', fontSize: 14
}, },
}, },
xAxis: { },
type: 'category', yAxis: {
data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'], name: '单位：万元',
axisLine: { axisLabel: {
lineStyle: { formatter: '{value}',
color: 'rgba(255,255,255,0.12)' color: '#e2e9ff',
}
},
axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: {
fontSize: 14
},
},
}, },
yAxis: { axisLine: {
name: '单位：万元', show: false,
axisLabel: { lineStyle: {
formatter: '{value}', color: 'rgba(255,255,255,0)'
color: '#e2e9ff',
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
} }
}, },
series: [{ splitLine: {
type: 'bar', lineStyle: {
data: [5000, 2600, 1300, 1300, 1250, 1500], color: 'rgba(255,255,255,0.12)'
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,244,255,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0,77,167,1)' // 100% 处的颜色
}], false),
barBorderRadius: [30, 30, 30, 30],
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
}
},
label: {
normal: {
show: true,
lineHeight: 30,
width: 80,
height: 30,
backgroundColor: 'rgba(0,160,221,0.1)',
borderRadius: 200,
position: ['-8', '-60'],
distance: 1,
formatter: [
' {d|●}',
' {a|{c}} \n',
' {b|}'
].join(','),
rich: {
d: {
color: '#3CDDCF',
},
a: {
color: '#fff',
align: 'center',
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: '#234e6c',
align: 'left'
},
}
}
} }
}] }
}, },
optionsStyle: {}, // 样式 series: [{
optionsData: {}, // 数据 type: 'bar',
optionsSetup: {}, data: [5000, 2600, 1300, 1300, 1250, 1500],
} barWidth: '20px',
}, itemStyle: {
computed: { normal: {
styleObj() { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
return { offset: 0,
position: this.ispreview ? 'absolute' : 'static', color: 'rgba(0,244,255,1)' // 0% 处的颜色
width: this.optionsStyle.width + 'px', }, {
height: this.optionsStyle.height + 'px', offset: 1,
left: this.optionsStyle.left + 'px', color: 'rgba(0,77,167,1)' // 100% 处的颜色
top: this.optionsStyle.top + 'px', }], false),
background: this.optionsSetup.background, barBorderRadius: [30, 30, 30, 30],
} shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
}
},
label: {
normal: {
show: true,
lineHeight: 30,
width: 80,
height: 30,
backgroundColor: 'rgba(0,160,221,0.1)',
borderRadius: 200,
position: ['-8', '-60'],
distance: 1,
formatter: [
' {d|●}',
' {a|{c}} \n',
' {b|}'
].join(','),
rich: {
d: {
color: '#3CDDCF',
},
a: {
color: '#fff',
align: 'center',
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: '#234e6c',
align: 'left'
},
}
}
}
}]
}, },
optionsStyle: {}, // 样式
optionsData: {}, // 数据
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: { watch: {
handler(val) { value: {
console.log(val) handler (val) {
this.optionsStyle = val.position console.log(val)
this.optionsData = val.data this.optionsStyle = val.position
this.optionsCollapse = val.setup this.optionsData = val.data
this.optionsSetup = val.setup this.optionsCollapse = val.setup
this.editorOptions() this.optionsSetup = val.setup
}, this.editorOptions()
deep: true,
}, },
deep: true,
}, },
mounted() { },
this.optionsStyle = this.value.position mounted () {
this.optionsData = this.value.data this.optionsStyle = this.value.position
this.optionsCollapse = this.value.setup this.optionsData = this.value.data
this.optionsSetup = this.value.setup this.optionsCollapse = this.value.setup
this.editorOptions() this.optionsSetup = this.value.setup
this.editorOptions()
},
methods: {
// 修改图标options属性
editorOptions () {
this.setOptionsTitle()
this.setOptionsX()
this.setOptionsY()
// this.setOptionsTop()
// this.setOptionsTooltip()
this.setOptionsMargin()
// this.setOptionsLegend()
this.setOptionsColor()
this.setOptionsData()
}, },
methods: { // 标题修改
// 修改图标options属性 setOptionsTitle () {
editorOptions() { const optionsCollapse = this.optionsSetup
this.setOptionsTitle() const title = {}
this.setOptionsX() title.text = optionsCollapse.titleText
this.setOptionsY() title.show = optionsCollapse.isNoTitle
// this.setOptionsTop() title.left = optionsCollapse.textAlign
// this.setOptionsTooltip() title.textStyle = {
this.setOptionsMargin() color: optionsCollapse.textColor,
// this.setOptionsLegend() fontSize: optionsCollapse.textFontSize,
this.setOptionsColor() fontWeight: optionsCollapse.textFontWeight,
this.setOptionsData() }
}, title.subtext = optionsCollapse.subText
// 标题修改 title.subtextStyle = {
setOptionsTitle() { color: optionsCollapse.subTextColor,
const optionsCollapse = this.optionsSetup fontWeight: optionsCollapse.subTextFontWeight,
const title = {} fontSize: optionsCollapse.subTextFontSize,
title.text = optionsCollapse.titleText }
title.show = optionsCollapse.isNoTitle
title.left = optionsCollapse.textAlign
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight,
}
title.subtext = optionsCollapse.subText
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize,
}
this.options.title = title this.options.title = title
}, },
// X轴设置 // X轴设置
setOptionsX() { setOptionsX () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const xAxis = { const xAxis = {
type: 'category', type: 'category',
show: optionsCollapse.hideX, // 坐标轴是否显示 show: optionsCollapse.hideX, // 坐标轴是否显示
name: optionsCollapse.xName, // 坐标轴名称 name: optionsCollapse.xName, // 坐标轴名称
nameTextStyle: { nameTextStyle: {
color: optionsCollapse.xNameColor, color: optionsCollapse.xNameColor,
fontSize: optionsCollapse.xNameFontSize, fontSize: optionsCollapse.xNameFontSize,
}, },
nameRotate: optionsCollapse.textAngle, // 文字角度 nameRotate: optionsCollapse.textAngle, // 文字角度
inverse: optionsCollapse.reversalX, // 轴反转 inverse: optionsCollapse.reversalX, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
interval: optionsCollapse.textInterval, // 文字角度 interval: optionsCollapse.textInterval, // 文字角度
rotate: optionsCollapse.textAngle, // 文字角度 rotate: optionsCollapse.textAngle, // 文字角度
textStyle: { textStyle: {
color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeX, fontSize: optionsCollapse.fontSizeX,
},
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
}
this.options.xAxis = xAxis
},
// Y轴设置
setOptionsY() {
const optionsCollapse = this.optionsSetup
const yAxis = {
type: 'value',
show: optionsCollapse.isShowY, // 坐标轴是否显示
name: optionsCollapse.textNameY, // 坐标轴名称
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY,
}, },
inverse: optionsCollapse.reversalY, // 轴反转 },
axisLabel: { axisLine: {
show: true, show: true,
textStyle: { lineStyle: {
color: optionsCollapse.colorY, // x轴 坐标文字颜色 color: optionsCollapse.lineColorX,
fontSize: optionsCollapse.fontSizeY,
},
}, },
splitLine: { },
show: false, }
this.options.xAxis = xAxis
},
// Y轴设置
setOptionsY () {
const optionsCollapse = this.optionsSetup
const yAxis = {
type: 'value',
show: optionsCollapse.isShowY, // 坐标轴是否显示
name: optionsCollapse.textNameY, // 坐标轴名称
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY,
},
inverse: optionsCollapse.reversalY, // 轴反转
axisLabel: {
show: true,
textStyle: {
color: optionsCollapse.colorY, // x轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeY,
}, },
axisLine: { },
show: true, splitLine: {
lineStyle: { show: false,
color: '#fff', },
}, axisLine: {
show: true,
lineStyle: {
color: optionsCollapse.lineColorY,
}, },
} },
}
this.options.yAxis = yAxis this.options.yAxis = yAxis
}, },
// 数值设定 or 柱体设置 // 数值设定 or 柱体设置
setOptionsTop() { setOptionsTop () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
if (series[key].type == 'bar') { if (series[key].type == 'bar') {
series[key].label = { series[key].label = {
show: optionsCollapse.isShow, show: optionsCollapse.isShow,
position: 'top', position: 'top',
distance: 10, distance: 10,
fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight,
}
series[key].barWidth = optionsCollapse.maxWidth
series[key].barMinHeight = optionsCollapse.minHeight
}
}
this.options.series = series
},
// tooltip 设置
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup
const tooltip = {
trigger: 'item',
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize, fontSize: optionsCollapse.fontSize,
}, color: optionsCollapse.subTextColor,
} fontWeight: optionsCollapse.fontWeight,
this.options.tooltip = tooltip }
}, series[key].barWidth = optionsCollapse.maxWidth
// 边距设置 series[key].barMinHeight = optionsCollapse.minHeight
setOptionsMargin() {
const optionsCollapse = this.optionsSetup
const grid = {
left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop,
containLabel: true,
} }
this.options.grid = grid }
}, this.options.series = series
// 图例操作 legend },
setOptionsLegend() { // tooltip 设置
const optionsCollapse = this.optionsSetup setOptionsTooltip () {
const legend = this.options.legend const optionsCollapse = this.optionsSetup
legend.show = optionsCollapse.isShowLegend const tooltip = {
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto' trigger: 'item',
legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto' show: true,
legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto' textStyle: {
legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto' color: optionsCollapse.lineColor,
legend.orient = optionsCollapse.layoutFront
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize, fontSize: optionsCollapse.fontSize,
} },
legend.itemWidth = optionsCollapse.lengedWidth }
}, this.options.tooltip = tooltip
// 渐变色 },
setOptionsColor() { // 边距设置
const optionsCollapse = this.optionsSetup setOptionsMargin () {
const barStart = {} const optionsCollapse = this.optionsSetup
barStart['offset'] = 0 const grid = {
barStart['color'] = optionsCollapse.barStart left: optionsCollapse.marginLeft,
const barEnd = {} right: optionsCollapse.marginRight,
barStart['offset'] = 1 bottom: optionsCollapse.marginBottom,
barStart['color'] = optionsCollapse.barEnd top: optionsCollapse.marginTop,
// this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false) containLabel: true,
}
this.options.grid = grid
},
// 图例操作 legend
setOptionsLegend () {
const optionsCollapse = this.optionsSetup
const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
legend.orient = optionsCollapse.layoutFront
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize,
}
legend.itemWidth = optionsCollapse.lengedWidth
},
// 渐变色
setOptionsColor () {
const optionsCollapse = this.optionsSetup
const barStart = {}
barStart['offset'] = 0
barStart['color'] = optionsCollapse.barStart
const barEnd = {}
barStart['offset'] = 1
barStart['color'] = optionsCollapse.barEnd
// this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false)
}, },
// 数据解析 // 数据解析
setOptionsData() { setOptionsData () {
const optionsSetup = this.optionsSetup const optionsSetup = this.optionsSetup
console.log(optionsSetup) console.log(optionsSetup)
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
console.log(optionsData) console.log(optionsData)
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup)
}, },
// 静态数据 // 静态数据
staticDataFn(val, optionsSetup) { staticDataFn (val, optionsSetup) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = [] this.options.xAxis.data = []
this.options.yAxis.data = staticData.categories this.options.yAxis.data = staticData.categories
this.options.xAxis.type = 'value' this.options.xAxis.type = 'value'
this.options.yAxis.type = 'category' this.options.yAxis.type = 'category'
} else { } else {
this.options.xAxis.data = staticData.categories this.options.xAxis.data = staticData.categories
this.options.yAxis.data = [] this.options.yAxis.data = []
this.options.xAxis.type = 'category' this.options.xAxis.type = 'category'
this.options.yAxis.type = 'value' this.options.yAxis.type = 'value'
} }
// series // series
const series = this.options.series const series = this.options.series
for (const i in series) { for (const i in series) {
if (series[i].type == 'bar') { if (series[i].type == 'bar') {
series[i].data = staticData.series[0].data series[i].data = staticData.series[0].data
}
}
},
// 动态数据
dynamicDataFn(val, optionsSetup) {
console.log(val)
if (!val) return
// x轴
if (optionsSetup.verticalShow) {
this.options.xAxis.data = []
this.options.yAxis.data = val.xAxis
this.options.xAxis.type = 'value'
this.options.yAxis.type = 'category'
} else {
this.options.xAxis.data = val.xAxis
this.options.yAxis.data = []
this.options.xAxis.type = 'category'
this.options.yAxis.type = 'value'
} }
}
},
// 动态数据
dynamicDataFn (val, optionsSetup) {
console.log(val)
if (!val) return
// x轴
if (optionsSetup.verticalShow) {
this.options.xAxis.data = []
this.options.yAxis.data = val.xAxis
this.options.xAxis.type = 'value'
this.options.yAxis.type = 'category'
} else {
this.options.xAxis.data = val.xAxis
this.options.yAxis.data = []
this.options.xAxis.type = 'category'
this.options.yAxis.type = 'value'
}
// series // series
const series = this.options.series const series = this.options.series
for (const i in series) { for (const i in series) {
if (series[i].type == 'bar') { if (series[i].type == 'bar') {
series[i].data = val.series[i].data series[i].data = val.series[i].data
}
} }
}, }
}, },
} },
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.echarts { .echarts {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style> </style>

39
report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue
Unescape Escape View File

@ -1,6 +1,7 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize /> <v-chart :options="options"
autoresize />
</div> </div>
</template> </template>
@ -13,7 +14,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean
}, },
data() { data () {
return { return {
options: { options: {
legend: { legend: {
@ -54,7 +55,7 @@ export default {
}; };
}, },
computed: { computed: {
styleObj() { styleObj () {
return { return {
position: this.ispreview ? "absolute" : "static", position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px", width: this.optionsStyle.width + "px",
@ -67,7 +68,7 @@ export default {
}, },
watch: { watch: {
value: { value: {
handler(val) { handler (val) {
console.log(val); console.log(val);
this.optionsStyle = val.position; this.optionsStyle = val.position;
this.optionsData = val.data; this.optionsData = val.data;
@ -78,7 +79,7 @@ export default {
deep: true deep: true
} }
}, },
mounted() { mounted () {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
this.optionsData = this.value.data; this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
@ -87,7 +88,7 @@ export default {
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions () {
this.setOptionsTitle(); this.setOptionsTitle();
// this.setOptionsX() // this.setOptionsX()
// this.setOptionsY() // this.setOptionsY()
@ -99,7 +100,7 @@ export default {
this.setOptionsData(); this.setOptionsData();
}, },
// 标题修改 // 标题修改
setOptionsTitle() { setOptionsTitle () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const title = {}; const title = {};
title.text = optionsCollapse.titleText; title.text = optionsCollapse.titleText;
@ -120,7 +121,7 @@ export default {
this.options.title = title; this.options.title = title;
}, },
// X轴设置 // X轴设置
setOptionsX() { setOptionsX () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const xAxis = { const xAxis = {
type: "category", type: "category",
@ -144,14 +145,14 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#fff" color: optionsCollapse.lineColorX
} }
} }
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
// Y轴设置 // Y轴设置
setOptionsY() { setOptionsY () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const yAxis = { const yAxis = {
type: "value", type: "value",
@ -175,7 +176,7 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#fff" color: optionsCollapse.lineColorY
} }
} }
}; };
@ -183,7 +184,7 @@ export default {
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 数值设定 or 柱体设置 // 数值设定 or 柱体设置
setOptionsTop() { setOptionsTop () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
@ -204,7 +205,7 @@ export default {
this.options.series = series; this.options.series = series;
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip() { setOptionsTooltip () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const tooltip = { const tooltip = {
trigger: "item", trigger: "item",
@ -217,7 +218,7 @@ export default {
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
// 边距设置 // 边距设置
setOptionsMargin() { setOptionsMargin () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
@ -229,7 +230,7 @@ export default {
this.options.grid = grid; this.options.grid = grid;
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend() { setOptionsLegend () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend; legend.show = optionsCollapse.isShowLegend;
@ -246,7 +247,7 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth; legend.itemWidth = optionsCollapse.lengedWidth;
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor() { setOptionsColor () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor; const customColor = optionsCollapse.customColor;
if (!customColor) return; if (!customColor) return;
@ -270,7 +271,7 @@ export default {
this.options = Object.assign({}, this.options); this.options = Object.assign({}, this.options);
}, },
// 数据解析 // 数据解析
setOptionsData() { setOptionsData () {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
console.log(optionsSetup); console.log(optionsSetup);
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
@ -280,7 +281,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsSetup); : this.dynamicDataFn(optionsData.dynamicData, optionsSetup);
}, },
// 静态数据 // 静态数据
staticDataFn(val, optionsSetup) { staticDataFn (val, optionsSetup) {
const staticData = JSON.parse(val); const staticData = JSON.parse(val);
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
@ -303,7 +304,7 @@ export default {
} }
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, optionsSetup) { dynamicDataFn (val, optionsSetup) {
console.log(val); console.log(val);
if (!val) return; if (!val) return;
// x轴 // x轴

39
report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
Unescape Escape View File

@ -1,6 +1,7 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize /> <v-chart :options="options"
autoresize />
</div> </div>
</template> </template>
@ -12,7 +13,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean
}, },
data() { data () {
return { return {
options: { options: {
grid: {}, grid: {},
@ -58,7 +59,7 @@ export default {
}; };
}, },
computed: { computed: {
styleObj() { styleObj () {
return { return {
position: this.ispreview ? "absolute" : "static", position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px", width: this.optionsStyle.width + "px",
@ -71,7 +72,7 @@ export default {
}, },
watch: { watch: {
value: { value: {
handler(val) { handler (val) {
console.log(val); console.log(val);
this.optionsStyle = val.position; this.optionsStyle = val.position;
this.optionsData = val.data; this.optionsData = val.data;
@ -82,7 +83,7 @@ export default {
deep: true deep: true
} }
}, },
mounted() { mounted () {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
this.optionsData = this.value.data; this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
@ -91,7 +92,7 @@ export default {
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions () {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
@ -103,7 +104,7 @@ export default {
this.setOptionsData(); this.setOptionsData();
}, },
// 标题修改 // 标题修改
setOptionsTitle() { setOptionsTitle () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const title = {}; const title = {};
title.text = optionsCollapse.titleText; title.text = optionsCollapse.titleText;
@ -124,7 +125,7 @@ export default {
this.options.title = title; this.options.title = title;
}, },
// X轴设置 // X轴设置
setOptionsX() { setOptionsX () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const xAxis = { const xAxis = {
type: "category", type: "category",
@ -148,14 +149,14 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#fff" color: optionsCollapse.lineColorX
} }
} }
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
// Y轴设置 // Y轴设置
setOptionsY() { setOptionsY () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const yAxis = { const yAxis = {
type: "value", type: "value",
@ -179,7 +180,7 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#fff" color: optionsCollapse.lineColorY
} }
} }
}; };
@ -187,7 +188,7 @@ export default {
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 数值设定 or 柱体设置 // 数值设定 or 柱体设置
setOptionsTop() { setOptionsTop () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
@ -208,7 +209,7 @@ export default {
this.options.series = series; this.options.series = series;
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip() { setOptionsTooltip () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const tooltip = { const tooltip = {
trigger: "item", trigger: "item",
@ -221,7 +222,7 @@ export default {
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
// 边距设置 // 边距设置
setOptionsMargin() { setOptionsMargin () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
@ -233,7 +234,7 @@ export default {
this.options.grid = grid; this.options.grid = grid;
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend() { setOptionsLegend () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend; legend.show = optionsCollapse.isShowLegend;
@ -250,7 +251,7 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth; legend.itemWidth = optionsCollapse.lengedWidth;
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor() { setOptionsColor () {
const optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor; const customColor = optionsCollapse.customColor;
if (!customColor) return; if (!customColor) return;
@ -274,7 +275,7 @@ export default {
this.options = Object.assign({}, this.options); this.options = Object.assign({}, this.options);
}, },
// 数据解析 // 数据解析
setOptionsData() { setOptionsData () {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
console.log(optionsSetup); console.log(optionsSetup);
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
@ -284,7 +285,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsSetup); : this.dynamicDataFn(optionsData.dynamicData, optionsSetup);
}, },
// 静态数据 // 静态数据
staticDataFn(val, optionsSetup) { staticDataFn (val, optionsSetup) {
const staticData = JSON.parse(val); const staticData = JSON.parse(val);
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
@ -307,7 +308,7 @@ export default {
} }
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, optionsSetup) { dynamicDataFn (val, optionsSetup) {
if (!val) return; if (!val) return;
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {

41
report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue
Unescape Escape View File

@ -1,6 +1,7 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize /> <v-chart :options="options"
autoresize />
</div> </div>
</template> </template>
@ -12,7 +13,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data() { data () {
return { return {
options: { options: {
color: [], color: [],
@ -98,7 +99,7 @@ export default {
} }
}, },
computed: { computed: {
styleObj() { styleObj () {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + 'px',
@ -111,7 +112,7 @@ export default {
}, },
watch: { watch: {
value: { value: {
handler(val) { handler (val) {
this.optionsStyle = val.position this.optionsStyle = val.position
this.optionsData = val.data this.optionsData = val.data
this.optionsCollapse = val.collapse this.optionsCollapse = val.collapse
@ -121,7 +122,7 @@ export default {
deep: true, deep: true,
}, },
}, },
created() { created () {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position
this.optionsData = this.value.data this.optionsData = this.value.data
this.optionsCollapse = this.value.collapse this.optionsCollapse = this.value.collapse
@ -130,7 +131,7 @@ export default {
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions () {
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsX() this.setOptionsX()
this.setOptionsY() this.setOptionsY()
@ -143,7 +144,7 @@ export default {
this.setOptionsColor() this.setOptionsColor()
}, },
// 标题修改 // 标题修改
setOptionsTitle() { setOptionsTitle () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const title = {} const title = {}
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText
@ -164,7 +165,7 @@ export default {
this.options.title = title this.options.title = title
}, },
// X轴设置 // X轴设置
setOptionsX() { setOptionsX () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const xAxis = { const xAxis = {
type: 'category', type: 'category',
@ -188,14 +189,14 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff', color: optionsCollapse.lineColorX,
}, },
}, },
} }
this.options.xAxis = xAxis this.options.xAxis = xAxis
}, },
// Y轴设置 // Y轴设置
setOptionsY() { setOptionsY () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const yAxis = [ const yAxis = [
{ {
@ -246,7 +247,7 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff', color: optionsCollapse.lineColorY,
}, },
}, },
}, },
@ -255,7 +256,7 @@ export default {
this.options.yAxis = yAxis this.options.yAxis = yAxis
}, },
// 折线设置 // 折线设置
setOptionsTop() { setOptionsTop () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
@ -288,7 +289,7 @@ export default {
} }
this.options.series = series this.options.series = series
}, },
setOptionsBar() { setOptionsBar () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
@ -309,7 +310,7 @@ export default {
this.options.series = series this.options.series = series
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip() { setOptionsTooltip () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const tooltip = { const tooltip = {
trigger: 'item', trigger: 'item',
@ -322,7 +323,7 @@ export default {
this.options.tooltip = tooltip this.options.tooltip = tooltip
}, },
// 边距设置 // 边距设置
setOptionsMargin() { setOptionsMargin () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
@ -334,7 +335,7 @@ export default {
this.options.grid = grid this.options.grid = grid
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend() { setOptionsLegend () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const legend = this.options.legend const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend
@ -350,7 +351,7 @@ export default {
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor() { setOptionsColor () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor
if (!customColor) return if (!customColor) return
@ -362,11 +363,11 @@ export default {
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options)
}, },
// 数据处理 // 数据处理
setOptionsData() { setOptionsData () {
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
}, },
staticDataFn(val) { staticDataFn (val) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
// x轴 // x轴
this.options.xAxis.data = staticData.xAxis this.options.xAxis.data = staticData.xAxis
@ -380,7 +381,7 @@ export default {
} }
} }
}, },
dynamicDataFn(val) { dynamicDataFn (val) {
if (!val) return if (!val) return
// x轴 // x轴
this.options.xAxis.data = val.xAxis this.options.xAxis.data = val.xAxis

39
report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue
Unescape Escape View File

@ -1,6 +1,7 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize /> <v-chart :options="options"
autoresize />
</div> </div>
</template> </template>
@ -12,7 +13,7 @@ export default {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
}, },
data() { data () {
return { return {
options: { options: {
grid: {}, grid: {},
@ -65,7 +66,7 @@ export default {
} }
}, },
computed: { computed: {
styleObj() { styleObj () {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? 'absolute' : 'static',
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + 'px',
@ -78,7 +79,7 @@ export default {
}, },
watch: { watch: {
value: { value: {
handler(val) { handler (val) {
this.optionsStyle = val.position this.optionsStyle = val.position
this.optionsData = val.data this.optionsData = val.data
this.optionsCollapse = val.collapse this.optionsCollapse = val.collapse
@ -88,7 +89,7 @@ export default {
deep: true, deep: true,
}, },
}, },
created() { created () {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position
this.optionsData = this.value.data this.optionsData = this.value.data
this.optionsCollapse = this.value.collapse this.optionsCollapse = this.value.collapse
@ -97,7 +98,7 @@ export default {
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions () {
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsX() this.setOptionsX()
this.setOptionsY() this.setOptionsY()
@ -109,7 +110,7 @@ export default {
this.setOptionsColor() this.setOptionsColor()
}, },
// 标题修改 // 标题修改
setOptionsTitle() { setOptionsTitle () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const title = {} const title = {}
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText
@ -130,7 +131,7 @@ export default {
this.options.title = title this.options.title = title
}, },
// X轴设置 // X轴设置
setOptionsX() { setOptionsX () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const xAxis = { const xAxis = {
type: 'category', type: 'category',
@ -154,14 +155,14 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff', color: optionsCollapse.lineColorX,
}, },
}, },
} }
this.options.xAxis = xAxis this.options.xAxis = xAxis
}, },
// Y轴设置 // Y轴设置
setOptionsY() { setOptionsY () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const yAxis = { const yAxis = {
type: 'value', type: 'value',
@ -185,7 +186,7 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff', color: optionsCollapse.lineColorY,
}, },
}, },
} }
@ -193,7 +194,7 @@ export default {
this.options.yAxis = yAxis this.options.yAxis = yAxis
}, },
// 折线设置 // 折线设置
setOptionsTop() { setOptionsTop () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const series = this.options.series const series = this.options.series
for (const key in series) { for (const key in series) {
@ -227,7 +228,7 @@ export default {
this.options.series = series this.options.series = series
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip() { setOptionsTooltip () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const tooltip = { const tooltip = {
trigger: 'item', trigger: 'item',
@ -240,7 +241,7 @@ export default {
this.options.tooltip = tooltip this.options.tooltip = tooltip
}, },
// 边距设置 // 边距设置
setOptionsMargin() { setOptionsMargin () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
@ -252,7 +253,7 @@ export default {
this.options.grid = grid this.options.grid = grid
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend() { setOptionsLegend () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const legend = this.options.legend const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend
@ -269,7 +270,7 @@ export default {
console.log(legend) console.log(legend)
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor() { setOptionsColor () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor
if (!customColor) return if (!customColor) return
@ -281,11 +282,11 @@ export default {
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options)
}, },
// 处理数据 // 处理数据
setOptionsData() { setOptionsData () {
const optionsData = this.optionsData // 数据类型 静态 or 动态 const optionsData = this.optionsData // 数据类型 静态 or 动态
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData) optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData)
}, },
staticDataFn(val) { staticDataFn (val) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val)
// x轴 // x轴
this.options.xAxis.data = staticData.categories this.options.xAxis.data = staticData.categories
@ -297,7 +298,7 @@ export default {
} }
} }
}, },
dynamicDataFn(val) { dynamicDataFn (val) {
if (!val) return if (!val) return
// x轴 // x轴
this.options.xAxis.data = val.xAxis this.options.xAxis.data = val.xAxis

Write Preview
Loading…
Cancel
Save