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',
}
], ],
}, },
{ {

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

@ -1,26 +1,27 @@
<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'
@ -141,7 +142,7 @@
} }
}, },
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',
@ -154,7 +155,7 @@
}, },
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
@ -165,7 +166,7 @@
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
@ -174,7 +175,7 @@
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions () {
this.setOptionsTitle() this.setOptionsTitle()
this.setOptionsX() this.setOptionsX()
this.setOptionsY() this.setOptionsY()
@ -186,7 +187,7 @@
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
@ -207,7 +208,7 @@
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',
@ -231,14 +232,14 @@
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',
@ -262,7 +263,7 @@
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff', color: optionsCollapse.lineColorY,
}, },
}, },
} }
@ -270,7 +271,7 @@
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
@ -291,7 +292,7 @@
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',
@ -304,7 +305,7 @@
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,
@ -316,7 +317,7 @@
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
@ -332,7 +333,7 @@
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth
}, },
// 渐变色 // 渐变色
setOptionsColor() { setOptionsColor () {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup
const barStart = {} const barStart = {}
barStart['offset'] = 0 barStart['offset'] = 0
@ -344,7 +345,7 @@
}, },
// 数据解析 // 数据解析
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 动态
@ -352,7 +353,7 @@
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) {
@ -375,7 +376,7 @@
} }
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, optionsSetup) { dynamicDataFn (val, optionsSetup) {
console.log(val) console.log(val)
if (!val) return if (!val) return
// x轴 // x轴
@ -400,13 +401,13 @@
} }
}, },
}, },
} }
</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