widgetCapsuleChart.vue
3.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!--
胶囊柱图
-->
<template>
<dv-capsule-chart :config="options" :style="styleObj"/>
</template>
<script>
import capsuleChart from "@jiaminghi/data-view/lib/components/capsuleChart";
import Vue from "vue";
Vue.use(capsuleChart)
export default {
name: "WidgetCapsuleChart",
props: {
value: Object,
ispreview: Boolean,
},
data() {
return {
//返回图标数据
options: {
colors: [],//颜色
data:[],//数据
unit: '',//单位
showValue: true//显示数值
},
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
}
},
// mounted() {
// this.optionsStyle = this.value.position;
// this.optionsData = this.value.data;
// this.optionsCollapse = this.value.setup;
// this.optionsSetup = this.value.setup;
// this.editorOptions();
// },
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.setOptionsColor();
//数据修改
this.setOptionsData();
},
// 颜色修改
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.colors = arrColor;
this.options = Object.assign({}, this.options);
this.options.unit =optionsSetup.unit;
this.options.showValue =optionsSetup.showValue;
},
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
console.log("optionsData.dataType",optionsData.dataType);
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
// console.log("设置静态数据",this.options)
const staticData = typeof val == "string" ? JSON.parse(val) : val;
this.options.data=staticData;
},
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.options.data = res;
// console.log("WidgetCapsuleChart2222====",res);
// this.staticDataFn(res);
});
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>