jgfl.vue
3.17 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
<template>
<div class="jgfl">
<div class="home-title">
<span class="title-name">监管分类</span>
<span class="title-more">更多＞＞</span>
</div>
<div class="home-content">
<div id="jgfl-myChart" class="chart"></div>
</div>
</div>
</template>
<script>
export default {
name: "jgfl",
components: {},
data () {
return {
data: [20118, 416232, 224447, 32, 48842],
};
},
mounted () {
this.echartInit();
},
methods: {
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("jgfl-myChart")
);
// 绘制图表
myChart.setOption({
title: {
text: "(单位: 件)",
textStyle: {
fontSize: 16,
color: "#606266",
fontWeight: "normal",
},
},
color: "red",
radar: {
indicator: [
{ name: "原则监管", max: 22000 },
{ name: "时效监管", max: 420000 },
{ name: "证书监管", max: 230000 },
{ name: "年限监管", max: 38000 },
{ name: "内容监管", max: 50000 },
],
name: {
color: "#606266",
formatter: function (value, indicator) {
if (value == "原则监管") {
return value + " " + _this.data[0];
} else if (value == "时效监管") {
return value + " " + _this.data[1];
} else if (value == "证书监管") {
return value + " " + _this.data[2];
} else if (value == "年限监管") {
return value + " " + _this.data[3];
} else if (value == "内容监管") {
return value + " " + _this.data[4];
}
},
},
splitLine: {
lineStyle: {
color: "#0F93F6",
},
},
splitArea: {
show: false
}
},
series: [
{
type: "radar",
data: [
{
value: _this.data,
},
],
},
],
});
},
},
};
</script>
<style scoped lang="scss">
@import "./home.scss";
.jgfl {
width: 100%;
height: 100%;
.chart {
width: 100%;
height: calc(100% - 10px);
margin-top: 10px;
}
}
</style>