mixin.js
3.63 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
import basic from './basic';
import { optionFormatter } from "@/utils/dealChart";
export default {
props: {
chartId: {
type: String
},
tval: { //图表按功能划分类型
type: String
},
cdata: {
type: Object,
default: () => {}
}
},
watch: {
cdata: {
handler(newVal, val) {
newVal && this.initChartData(newVal);
},
deep: true
}
},
components: {
basic
},
data() {
return {
chartData: null,
chart: null,
}
},
methods: {
getRandomColors(length) {
let colors = [],
temp = [];
while (colors.length < length) {
temp.push(getColor());
colors = [...new Set(temp)];
}
function getColor() {
return (
"#" +
("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6)
);
}
return colors;
},
/**
* 自定义处理图表参数
* */
checkOption(preData) {
if (preData.series && (preData.series.length == 0 || (preData.series[0].data && preData.series[0].data.length == 0))) {
let lang = localStorage.getItem('lang') || '';
let nodatatext = '';
if (lang == 'en_US') {
nodatatext = 'No Data'
} else if (lang == 'zh_TW') {
nodatatext = '暫無數據'
} else {
nodatatext = '暂无数据'
}
return {
isEmpty: true,
graphic: [{
type: 'image',
left: 'center',
bottom: '51%',
style: {
image: '/static/img/no_data.png',
width: 60,
height: 60,
}
}, {
type: 'text',
left: 'center',
top: '52%',
z: 100,
style: {
fill: '#444',
text: nodatatext,
font: '16px "Microsoft YaHei"'
}
}]
};
}
return preData;
},
/**
* 处理图表参数
* 说明 preChartData:预处理后端的基础数据
* dealChartData:处理成echart直接生成图表的数据
* */
initChartData(cdata) {
let chartData = JSON.parse(JSON.stringify(cdata));
let preData = this.preChartData(chartData);
const option = preData.noProcess ? this.checkOption(preData) : optionFormatter(preData);
if (!option) return;
if (option.isEmpty) {
option.xAxis = {
show: false
};
option.yAxis = {
show: false
};
option.grid = { top: 20, right: 20, bottom: 20, left: 20 };
this.chartData = option;
return;
}
this.chartData = this.dealChartData(option);
}
},
mounted() {
this.initChartData(this.cdata);
this.$refs.basic && this.$refs.basic.chart && (this.chart = this.$refs.basic.chart);
},
created: function() {
}
}