第一次用echarts，對其配置屬性不是很熟，所以做儀表盤時，有點找不到北。最后完成的效果圖為：
其中有兩個比較棘手的問題（對於我這個新手來說）：
1、外面那個外弧的實現
針對這個效果，我是取巧，直接用兩個表盤來實現的（代碼放在下面）。
2、表盤顏色的漸變（外表盤的）
這個問題我找了很久，然后瞎找找到了一個類似的，然后參考着針對自己的要求改動。
直接上代碼：
1 option = { 2 series: [ 3 { 4 type: "gauge", 5 center: ["50%", "45%"], // 儀表位置 6 radius: "80%", //儀表大小 7 startAngle: 200, //開始角度 8 endAngle: -20, //結束角度 9 axisLine: { 10 show: false, 11 lineStyle: { // 屬性lineStyle控制線條樣式 12 color: [ 13 [ 0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ 14 offset: 1, 15 color: "#E75F25" // 50% 處的顏色 16 }, { 17 offset: 0.8, 18 color: "#D9452C" // 40% 處的顏色 19 }], false) ], // 100% 處的顏色 20 [ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ 21 offset: 1, 22 color: "#FFC539" // 70% 處的顏色 23 }, { 24 offset: 0.8, 25 color: "#FE951E" // 66% 處的顏色 26 }, { 27 offset: 0, 28 color: "#E75F25" // 50% 處的顏色 29 }], false) ], 30 [ 0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 31 offset: 1, 32 color: "#C7DD6B" // 90% 處的顏色 33 }, { 34 offset: 0.8, 35 color: "#FEEC49" // 86% 處的顏色 36 }, { 37 offset: 0, 38 color: "#FFC539" // 70% 處的顏色 39 }], false) ], 40 [1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { 41 offset: 0.2, 42 color: "#1CAD52" // 92% 處的顏色 43 }, { 44 offset: 0, 45 color: "#C7DD6B" // 90% 處的顏色 46 }], false) ] 47 ], 48 width: 10 49 } 50 }, 51 splitLine: { 52 show: false 53 }, 54 axisTick: { 55 show: false 56 }, 57 axisLabel: { 58 show: false 59 }, 60 pointer : { //指針樣式 61 length: '45%' 62 }, 63 detail: { 64 show: false 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 offsetCenter: [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 };