ex2.vue
2.87 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
<template>
<div class="echart" id="mychart2" :style="myChartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: {
percentage: {
type: String,
default: "",
},
},
data() {
return {
myChartStyle: { float: "left", width: "100%", height: "200px" }, //图表样式
};
},
mounted() {
this.initEcharts();
},
methods: {
initEcharts() {
console.log(Number(this.percentage));
const option = {
series: [
{
type: "gauge",
startAngle: 180,
radius: "80%",
endAngle: 0,
min: 0,
max: 1000,
splitNumber: 4,
axisLine: {
lineStyle: {
width: 20,
color: [
[0.25, "#ec5c17"],
[0.5, "#fc9b4f"],
[0.75, "#fcc14f"],
[1, "#00b099"],
],
},
},
pointer: {
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 2,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
axisLabel: {
color: "auto",
fontSize: 20,
distance: -60,
formatter: function (value) {
if (value === 0.875) {
return "A";
} else if (value === 0.625) {
return "B";
} else if (value === 0.375) {
return "C";
} else if (value === 0.125) {
return "D";
}
return "";
},
},
title: {
offsetCenter: [0, "-20%"],
fontSize: 30,
},
detail: {
fontSize: 20,
width: "90",
color: "#fff",
borderRadius: 100,
backgroundColor: "auto",
offsetCenter: ['8', "38%"],
valueAnimation: true,
formatter: function (value) {
return value + "分";
},
},
data: [
{
value: Number(this.percentage),
// name: "Grade Rating",
},
],
},
],
};
const myChart = echarts.init(document.getElementById("mychart2"));
myChart.clear();
myChart.setOption(option, true);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
},
};
</script>