funnelChart.vue
9.32 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<template>
<div style="position:relative;">
<basic ref="basic" :chartId="chartId" :chartData="chartData"></basic>
</div>
</template>
<script>
import mixin from './mixin';
import { chartweather, weatherpng } from '../Charts/weather'
export default {
mixins: [mixin],
data() {
return {
}
},
methods: {
/**
* 预处理option参数
* */
preChartData(cdata) {
/*if(!cdata||!cdata.data||!cdata.data[0]||cdata.data[0].value==0){
cdata.series = [];
cdata.noProcess = false;
}*/
return cdata;
},
/**
* 处理option参数
* */
dealChartData(data) {
var uploadedDataURL = "/asset/get/s/data-1576742942370-X6JMK0GY.png";
var colors = ['#1cd389', '#668eff', '#ffc751', '#ff6e73', '#8683e6', '#9692ff'];
var url = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAMAAACLgl7OAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaVBMVEUAAADBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcEAAAD45xibAAAAInRSTlMAmT6WJYwSfBMGZAFHmEgtkBeCCW0KAlI1k5QeiA10A1tc7ah1owAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAB7SURBVCjPtZDZDoAgDAQXvA+8bwX1/3/SGKIBEd+cx07TdgtIiAF0/mygDvnAoYDr2b3nnjP8wOaDUG6J4ncfR9cdScpMzbJECZEXT1/kesyy0n1VPv6AulF908Kg6+9DWN/hjWGUfhpgYV5Ov8ywwgUhguODddtXvXIAjuUEs/70/t4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMTItMTZUMTU6MzM6MDkrMDg6MDCzL2BEAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTEyLTE2VDE1OjMzOjA5KzA4OjAwwnLY+AAAAABJRU5ErkJggg==';
if (!data || JSON.stringify(data) === "{}"||data.data.length==0) {
return false;
}
let chartdata = data.data.sort((a, b) => b.value - a.value);
let graphic = [];
let halfW = this.$refs.basic.$el.offsetWidth/2;
let partH = 400/chartdata.length;
let nameList = JSON.parse(JSON.stringify(chartdata)).sort((a, b) => b.value - a.value);
for (var i = 0; i < nameList.length; i++) {
graphic.push({
type: 'group',
bounding: 'raw',
left:0,
top: partH*i,
children: [{
type: 'rect',
left: 0,
top: 0,
shape: {
width: halfW,
height: partH
},
style: {
fill: i%2?'#fff':'#F5F7F9'
}
},
{
type: 'text',
left: 20,
top: partH/3,
style: {
fill: '#000',
font: 'normal 15px sans-serif',
text: nameList[i].name
}
},
{
type: 'text',
left: 20,
top: partH/1.9,
style: {
fill: '#3F8AFA',
font: 'normal 15px sans-serif',
text: this.toThousands(nameList[i].value)+this.$t("format.perNum")
}
}
]
})
}
chartdata.forEach((item,idx)=>{
item.value1 = item.value;
item.value = 1000-250*idx;
return item ;
})
var option = {
backgroundColor: "transparent",
graphic,
color: data.color || ["#6FA9FF", "#FF9C7F", "#66D5C6", "#FFD48A", "#FFA2C0"],
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
tooltip: {
formatter: params => {
return `${params.name} ${params.data.value1 || ""}${
params.data.value1 ? this.$t("format.perNum") : ""
}`;
}
},
series: [{
top: 0,
type: 'funnel',
height: 400,
gap: 0,
//minSize: 80,
left: '25%',
width: '50%',
label: {
show: true,
position: 'inside',
fontSize: '15',
formatter: function(d) {
var ins = d.name + '{aa|}\n' //+ d.data.value;
return ins
},
rich: {
aa: {
padding: [8, 0, 6, 0],
}
}
},
data: chartdata
},
{
top: 0,
type: 'funnel',
gap: 0,
height: 400,
//minSize: 80,
left: '25%',
width: '50%',
color: '#000000',
z: 2,
label: {
normal: {
color: '#000000',
position: 'rightTop',
//backgroundColor: '#f6f7fc',
//borderColor: '#f6f7fc',
//borderWidth: 1,
//borderRadius: 4,
//padding: [11, 25, 11, 25],
formatter: function(d) {
let index = d.dataIndex;
let len = chartdata.length;
let perc = index == 0 ? '' : (d.data.value1 * 100 / chartdata[index-1].value1).toFixed(2) + '%';
let pinfo = "";
if (perc) {
pinfo = '{gap|}{aa|} ' + chartdata[index-1].name + '->' + chartdata[index].name + '：';
}
var ins = pinfo + '{bb|' + (perc) + '}';
return ins
},
rich: {
gap:{
width: 50,
},
aa: {
width: 50,
height: 320 / chartdata.length,
backgroundColor: {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAACdCAYAAAB2BhyZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDOEQ0NTQyOTQ0NjJFQzExOTAxQkVBN0E2MDJFMEVGMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozN0UzQTc1ODYyNDQxMUVDODg4QkRBNzQyOTNGRUQ3NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozN0UzQTc1NzYyNDQxMUVDODg4QkRBNzQyOTNGRUQ3NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM4RDQ1NDI5NDQ2MkVDMTE5MDFCRUE3QTYwMkUwRUYwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM4RDQ1NDI5NDQ2MkVDMTE5MDFCRUE3QTYwMkUwRUYwIi8+IDwvcmRmOkRlc2NyaXB0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'
}
},
bb: {
color: '#333',
fontSize: '14',
}
}
}
},
labelLine: {
show: false
},
data: chartdata
}
]
};
if(data.data.length==0)option.series=[];
if (data.otherConf) {
option.series.lineStyle = data.otherConf.lineStyle || '';
option.series.top = data.otherConf.top || ''
}
return option;
}
},
created() {
}
}
</script>
<style scoped>
</style>