sankeyChart.vue
2.81 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
<template>
<div>
<basic ref="basic" :chartId="chartId" :chartData="chartData"></basic>
</div>
</template>
<script>
import mixin from "./mixin";
export default {
mixins: [mixin],
data() {
return {};
},
methods: {
/**
* 预处理option参数
* */
preChartData(cdata) {
return cdata;
},
/**
* 处理option参数
* */
dealChartData(optionFormat) {
let { _color, animation = false, orient } = optionFormat.otherConf;
optionFormat.xAxis.show = false;
optionFormat.yAxis.show = false;
optionFormat.legend.show = false;
optionFormat.grid = {
left: 0,
top: 0,
right: 0,
bottom: 0,
};
optionFormat.color = _color || optionFormat.color;
optionFormat.tooltip = {
show: true,
trigger: "item",
backgroundColor: "#fff",
padding: [0, 0, 0, 0],
textStyle: {
color: "#333333",
},
};
let option = Object.assign({}, optionFormat);
/*option.series[0].data = [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
];*/
option.series.forEach((item, index) => {
item.data[0].itemStyle = {
color: this.tval != "sankey" ? "#ffd588" : "#ea7ccc",
};
item.left = this.tval != "sankey3" ? "10%" : "0.5%";
item.right = this.tval != "sankey2" ? "10%" : "0.5%";
item.lineStyle = {
color: this.tval != "sankey2" ? "source" : "target",
curveness: 0.5,
};
item.draggable = false;
item.orient = orient || "vertical";
item.label = {
formatter(params) {
return params.name;
},
position:
orient && orient == "horizontal"
? this.tval == "sankey3"
? "right"
: "left"
: "bottom",
};
if (!orient || orient != "horizontal") {
item.data[0].label = {
position: "top",
};
}
});
option.tooltip.formatter = (params, ticket, callback) => {
let num = params.data.number;
let htmls =
"<div>" +
'<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' +
params.name +
`: <br>${
num ? '<span style="color:#0069ff">' + num + "</span>人，" : ""
}` +
'<span style="color:#0069ff">' +
(params.value * 100).toFixed(2) +
`%</span></p>` +
"</div>";
return htmls;
};
return option;
},
},
created() {},
};
</script>
<style scoped>
.chart {
position: relative;
height: 500px;
}
</style>