第一次用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      };