treemapChart.vue
1.79 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
<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, yAxisName, doubleYaxis, isSwapY, grid } =
optionFormat.otherConf;
optionFormat.xAxis.show = false;
optionFormat.yAxis.show = false;
optionFormat.legend.show = false;
optionFormat.color = _color;
optionFormat.series.forEach((item, index) => {
item.width = "100%";
item.height = "100%";
item.roam = true;
item.itemStyle = {
gapWidth: 1,
color: "#f00",
};
item.label = {
position: "inside",
formatter: function (params) {
let html = `${params.name}\n${params.value}${painter.$t('format.perTime')}\n${(
(params.value / params.treePathInfo[1].value) *
100
).toFixed(2)}%`;
return html;
},
};
item.breadcrumb = {
itemStyle: {
//color:'#f00'
},
};
});
let option = Object.assign({}, optionFormat);
option.tooltip.formatter = (params) => {
let htmls = "";
htmls += `<span>业态: ${
params.data.path.split("/")[0]
}</span><br/><span>店铺: ${params.name}</span><br/><span>客流: ${
params.value
}${painter.$t('format.perTime')}</span>`;
return htmls;
};
return option;
},
},
created() {},
};
</script>
<style scoped>
</style>