第一次用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 : 32108 }109 }110 },111 data: [{112 value: 56,113 label: {114 textStyle: {115 fontSize: 12116 }117 }118 }]119 }120 ]121 };