五彩斑斓的世界echartsgauge仪表盘设置第⼀次⽤echarts，对其配置属性不是很熟，所以做仪表盘时，有点找不到北。最后完成的效果图为：其中有两个⽐较棘⼿的问题（对于我这个新⼿来说）：
1、外⾯那个外弧的实现
针对这个效果，我是取巧，直接⽤两个表盘来实现的（代码放在下⾯）。
2、表盘颜⾊的渐变（外表盘的）
这个问题我找了很久，然后瞎找找到了⼀个类似的，然后参考着针对⾃⼰的要求改动。
直接上代码：
1 option = {
2 ries: [
3 {
4 type: "gauge",
5 center: ["50%", "45%"], // 仪表位置
6 radius: "80%", //仪表⼤⼩
7 startAngle: 200, //开始⾓度
8 endAngle: -20, //结束⾓度
9 axisLine: {
10 show: fal,
11 lineStyle: { // 属性lineStyle控制线条样式
12 color: [
13 [ 0.5, aphic.LinearGradient(0, 0, 1, 0, [{
14 offt: 1,
15 color: "#E75F25" // 50% 处的颜⾊
16 }, {
17 offt: 0.8,
18 color: "#D9452C" // 40% 处的颜⾊
19 }], fal) ], // 100% 处的颜⾊
20 [ 0.7, aphic.LinearGradient(0, 0, 1, 0, [{
国家学习网
21 offt: 1,
22 color: "#FFC539" // 70% 处的颜⾊
23 }, {
24 offt: 0.8,
25 color: "#FE951E" // 66% 处的颜⾊
26 }, {
27 offt: 0,
初心房间
28 color: "#E75F25" // 50% 处的颜⾊
29 }], fal) ],
30 [ 0.9, aphic.LinearGradient(0, 0, 0, 1, [{
31 offt: 1,
32 color: "#C7DD6B" // 90% 处的颜⾊老师的歌
33 }, {
34 offt: 0.8,
35 color: "#FEEC49" // 86% 处的颜⾊
36 }, {
37 offt: 0,
38 color: "#FFC539" // 70% 处的颜⾊
39 }], fal) ],
40 [1, aphic.LinearGradient(0, 0, 0, 1, [ {
41 offt: 0.2,
42 color: "#1CAD52" // 92% 处的颜⾊
43 }, {
44 offt: 0,
45 color: "#C7DD6B" // 90% 处的颜⾊
46 }], fal) ]
47 ],
48 width: 10
49 }
50 },
51 splitLine: {
52 show: fal
53 },肉色理发店
54 axisTick: {
55 show: fal
56 },
57 axisLabel: {
58 show: fal
59 },
60 pointer : { //指针样式
61 length: '45%'
62 },
63 detail: {
64 show: fal
65 }
66 },
67 {
68 type : "gauge",
69 center: ["50%", "45%"], // 默认全局居中
70 radius : "70%",
71 startAngle: 200,
72 endAngle: -20,
73 axisLine : {
74 show : true,
75 lineStyle : { // 属性lineStyle控制线条样式
76 color : [ //表盘颜⾊
77 [ 0.5, "#DA462C" ],//0-50%处的颜⾊
78 [ 0.7, "#FF9618" ],//51%-70%处的颜⾊
79 [ 0.9, "#FFED44" ],//70%-90%处的颜⾊
80 [ 1,"#20AE51" ]//90%-100%处的颜⾊
81 ],香芋西米露
82 width : 30//表盘宽度
83 }
84 },
85 splitLine : { //分割线样式（及10、20等长线样式）
86 length : 30,
87 lineStyle : { // 属性lineStyle控制线条样式
88 width : 2
89 }
90 },
91 axisTick : { //刻度线样式（及短线样式）
92 length : 20
93 },
94 axisLabel : { //⽂字样式（及“10”、“20”等⽂字样式）
95 color : "black",
96 distance : 5 //⽂字离表盘的距离
97 },
98 detail: {
99 formatter : "{score|{value}%}",
100 offtCenter: [0, "40%"],
101 backgroundColor: '#FFEC45',
102 height:30,
103 rich : {
104 score : {
105 color : "white",
106 fontFamily : "微软雅⿊",
夜莺与玫瑰读后感107 fontSize : 32
108 }
109 }
110 },
尤文图斯足球俱乐部
111 data: [{
112 value: 56,
113 label: {
114 textStyle: {
115 fontSize: 12
116 }
117 }
118 }]
119 }
120 ]
121 };
